<template>
  <div class="fangtai" ref="fangtai" v-clickoutside="handleClose" @contextmenu.prevent="handlerRightContextmenu($event)">
    <el-container :style="'height: calc(100vh - ' + (showRoomStateDesc ? '240' : '176') + 'px);overflow: hidden;'">
      <el-container style="border-right: 1px solid #ededed;">
        <!-- 顶部筛选滚动栏 -->
        <el-header v-if="setting.topFilterMode === 1" class="rooms-el-header" style="height: auto;">
          <div class="scroll-pane el-col-20">
            <div v-if="showLeftIcon" class="arrow-content left-icon-content" @click="scollByIcon('left')">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div v-if="showRightIcon" class="arrow-content right-icon-content" @click="scollByIcon('right')">
              <i class="el-icon-arrow-right"></i>
            </div>
            <div
              ref="container"
              v-resize="scollOrContentResize"
              :style="containerStyle"
              class="scroll-container"
              @scroll="scollOrContentResize"
            >
              <div class="scoll-slot">
                <el-radio-group v-model="roomType" style="margin-bottom: 2px;">
                  <el-radio-button v-for="(item, index) in roomTypeList" :label="index" @change="selectQueryOption(item, index, 'room')" :key="index">{{item.name}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </div>
          <span class="el-col-4" style="line-height: 34px;">共计：{{typeMapCount}}间</span>
        </el-header>
        <!-- 操作按钮 -->
        <el-header class="rooms-el-header" style="height: auto;">
          <div class="rooms-el-header-content">
            <div style="float: left;">
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:reserve')" type="danger"
                :disabled="selectSign.lock || selectSign.weixiu || selectSign.ruzhu" @click="reserve(selectRoom)">预定</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:ruzhu')" type="danger"
                :disabled="selectSign.lock || selectSign.weixiu || selectSign.ruzhu" @click="ruzhu(selectRoom)">入住</el-button>
              <el-button size="small" v-if="isAuth('hotel:tsellerclear:one')" type="danger" :disabled="selectSign.jing || selectSign.weixiu || selectRoom.length == 0"
                @click="showzzhuf(selectRoom,'0')">置干净</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroom:setType2')" type="danger" :disabled="selectSign.dirty || selectSign.weixiu || selectRoom.length == 0"
                @click="setClearAll(selectRoom,'dirty')">置脏</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroom:updatetype')" type="danger" :disabled="selectSign.weixiu  || selectSign.ruzhu|| selectRoom.length == 0"
                @click="weixiuBtn2(selectRoom)">
                {{setMaintainName}}
              </el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroom:changeState')" type="danger" :disabled="selectSign.weixiu || selectSign.lock || selectSign.ruzhu || selectRoom.length == 0"
               @click="open2(selectRoom)">锁房</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" type="danger"
                :disabled="dataList.filter(item => item.checked).length != 1 || selectSign.lianfang || !selectSign.ruzhu"
                @click="joinRoomBtn(dataList.filter(item => item.checked)[0].singleId)">联房</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" type="danger"
              >批量置净</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" type="danger"
              >批量制卡</el-button>
              <el-button size="small" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" type="danger"
              >非在住POS消费</el-button>
            </div>
            <div class="search-box"  style="float: left; margin: 0 20px;display: flex;align-items: center;">
              <el-input
                v-model="dataForm.key"
                placeholder="房间号/姓名/手机号/身份证号"
                @keyup.enter.native="selectFloorRoom"
              >
              <i slot="suffix" class="el-input__icon el-icon-search" @click="selectFloorRoom"></i>
              </el-input>
              <el-button size="small" 
              @click="readCard"
              v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')" 
              type="danger"
              >读卡</el-button>
            </div>
            <div>
              <!-- <el-button icon="el-icon-search" @click="showQuery=true" style="margin-right: 20px;">快速查询</el-button> -->
              <el-tooltip :content="'当前：' + (selType ? '多选' : '单选')" style="margin-right: 20px;" placement="bottom"
                :open-delay="700">
                <el-switch v-model="selType" active-text="多选" class="switch" inactive-text="单选"></el-switch>
                <!-- <el-button type="danger" size="small" @click="selRoomFloorBtn">
                  已选：{{ dataList.filter(item => item.checked).length }}
                  <i class="el-icon-arrow-right el-icon--right"></i>
                </el-button> -->
              </el-tooltip>
              
              <el-tooltip v-if="isAuth('room:setting:update')" content="设置" placement="top" :open-delay="600">
                <el-button  size="small" icon="el-icon-setting" @click="openSettingDialog">设置</el-button>
              </el-tooltip>
              <!-- 已选房间弹窗 -->
              <div :class="alertShow ? 'selected-rooms show' : 'selected-rooms'">
                <div class="selected-room-box">
                  <div>
                    <span class="room-number-tag in_block">共：{{ dataList.filter(item => item.checked).length }}间</span>
                  </div>
                  <div>
                    <span class="room-number-tag in_block" v-for="item in dataList.filter(item => item.checked)">
                      {{item.roomSignNum}}
                      <i class="el-icon-close" @click="closeSelect(item)"></i>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-header>

        <el-main 
          v-loading="roomLoading"
          class="rooms-box" 
          style="padding-top: 0px;position: relative;" 
          ref="fangtaiBox">
          <div v-if="dataList.length == 0" style="text-align: center;line-height: 80px;">未查询到房间</div>
          <div v-for="(item, index) in dataList" :key="item.id">
            <!-- 楼栋楼层 -->
            <div slot="reference" style="background-color: white; color: #000000; clear:both; height: 30px; width: 100%;"
              v-if="setting.sortType == 1 && item.floorFlag == true && item.pageFlag == true" 
              class="vc" 
              :class="[cellTypeClass[setting.cellType + ''], { FloorBreak: item.isBreak }]">
              <div class="room-box-content">
                <div class="floor-num" >{{item.fpname}} {{item.fname}}
                  <el-divider direction="vertical" style="background-color:#ccc;"></el-divider> 
                  <span class="floor-desc">12间：在住5间/空置12间</span>
                </div>
              </div>
            </div>
            <!-- 鼠标悬停弹出窗 -->
            <el-popover
              :ref="'roomPopover' + item.id" 
              :popper-options="{
                boundariesElement: 'viewport',
                gpuAcceleration: false,'open-delay': 0,}"
              :open-delay="0"
              :close-delay="0"
              placement="right-start"
              trigger="hover">
              <div class="right_div" @mousemove="handlerPopoverHide" @mouseenter="handlerPopoverHide">
                <!-- 已入住房间悬停弹窗 -->
                <ul class="right_ul" v-if="item.isSingle == 1">
                  <!-- <li class="right_common_li">
                    <div class="flexBox oneColumn">
                      <div class="j_c_s alignItem_start">
                        <div class="bold" style="font-size: 14px; display: inline-flex;width: 100%; max-width: 100%;">
                          <span>房号：</span>
                          <span class="remark_ellipsis" style="display: -webkit-box; line-height: 1.5; width: auto; margin-top: 0px;margin-right: 5px;">{{item.roomSignNum}}</span>
                          <div class="icon_box" style="max-width: 80px;">
                            <div class="icon_circle icon_circle_sanke">
                              <i class="iconfont" style="font-size: 12px;" v-if="item.sisourceType == 0">散</i>
                              <i class="iconfont" style="font-size: 12px;" v-if="item.sisourceType == 1">会</i>
                              <i class="iconfont" style="font-size: 12px;" v-if="item.sisourceType == 2">协</i>
                              <i class="iconfont" style="font-size: 12px;" v-if="item.sisourceType == 3">中</i>
                              <i class="iconfont" style="font-size: 12px;" v-if="item.sicheckinType == 1">时</i>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div>
                        <label class="fourChar">抵店:</label>
                        <span>{{item.pearrivalsTime}}</span>
                      </div>
                      <div>
                        <label class="fourChar">预离:</label>
                        <span>{{item.pepredissociationTime}}</span>
                      </div>
                    </div>
                  </li> -->
                  <li class="right_common_li roomRemark" v-if="item.peopleEntities">
                    <div class="flexBox oneColumn">
                      <div class="alignItem_start" style="display: block;" v-for="(peo,index) in item.peopleEntities"
                        :key="index">
                        <div>
                          {{peo.name}} {{peo.sex == 1 ? '男' : '女'}}
                          {{peo.agreementLabel}}
                          {{peo.certificatesNumber}}
                        </div>
                        <div v-if="peo.address">地址：{{peo.address}}</div>
                        <div v-if="peo.tel">电话：{{peo.tel ? (peo.tel=='null'?'--':peo.tel) : '--'}}</div>
                      </div>
                    </div>
                  </li>
                  <li class="right_common_li">
                    <div class="flexBox oneColumn money">
                      <el-row>
                        <div>
                          <label class="fourChar">房型：</label>
                          <span>{{ item.roomName }}</span>
                        </div>
                      </el-row>
                      <el-row v-if="item.singleNo != 0">
                        <div class="ellipsis">
                          <label class="fourChar">联房：</label>
                          <span>{{ item.lianfangName }}</span>
                        </div>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">门市价:</label>
                            <span class="or_color1 bold">￥{{ item.roomOprice }}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">优惠价:</label>
                            <span class="or_color1 bold">￥{{ item.discountRoomPrice }}</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">消费:</label>
                            <span>￥{{item.peconsumption}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">押金:</label>
                            <span>￥{{item.deposit}}</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">预收:</label>
                            <span>￥{{item.pepayment}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <label class="fourChar">预授权:</label>
                            <span v-if="item.singleNo == 0">￥{{item.payPrice}}</span>
                            <span v-else>￥{{item.payPrice / 2}}</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <div>
                            <label class="fourChar" v-if="item.singleNo == 0">余额:</label>
                            <label class="fourChar" v-else>联房余额:</label>
                            <span v-if="item.singleNo == 0">￥{{(item.pepayment + item.pedeposit + item.payPrice - item.peconsumption).toFixed(2)}}</span>
                            <span v-else>￥{{(item.lianpayment + item.lianyushouquan + item.liandeposit - item.lianconsumption).toFixed(2)}}</span>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </li>
                  <li class="right_common_li">
                    <div class="flexBox oneColumn">
                      <div>
                        <label class="fourChar">客人类型:</label>
                        <span v-if="item.sisourceType == 0">散客</span>
                        <span v-if="item.sisourceType == 1">会员</span>
                        <span v-if="item.sisourceType == 2">协议单位</span>
                        <span v-if="item.sisourceType == 3">中介</span>
                      </div>
                      <div v-if="item.sisourceType == 1">
                        <label class="fourChar">会员名称:</label>
                        <span>{{item.lname}}</span>
                      </div>
                      <div v-if="item.sisourceType == 2">
                        <label class="fourChar">协议名称:</label>
                        <span>{{item.customername}}</span>
                      </div>
                      <div>
                        <label class="fourChar">入住类型:</label>
                        <span v-if="item.sicheckinType == 0">全天</span>
                        <span v-if="item.sicheckinType == 1">时租</span>
                        <span v-if="item.sicheckinType == 2">自用</span>
                        <span v-if="item.sicheckinType == 3">免费</span>
                      </div>
                    </div>
                  </li>
                  <li class="right_common_li roomRemark">
                    <div class="flexBox oneColumn">
                      <div class="alignItem_start">
                        <label class="fourChar">订单备注:</label>
                        <span class="remark_ellipsis">{{item.siremarks}}</span>
                      </div>
                    </div>
                  </li>
                  <li class="right_common_li roomRemark">
                    <div class="flexBox oneColumn">
                      <div class="alignItem_start">
                        <label class="fourChar">对客服务:</label>
                        <span class="remark_ellipsis" v-if="item.ddisturb!=null&&item.ddisturb=='true'">免打扰.</span>
                        <span class="remark_ellipsis" v-if="item.dquery!=null&&item.dquery=='true'">免查询.</span>
                        <span class="remark_ellipsis" v-if="item.hhousePrices!=null&&item.hhousePrices=='true'">隐藏房价</span>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 未入住房间悬停弹窗 -->
                <ul class="right_ul" v-else>
                  <li class="right_common_li">
                    <div class="flexBox oneColumn">
                      <div style="display:flex;align-items:center;justify-content:space-between;">
                        <span>{{ item.roomName }}</span>
                        <span>{{ item.roomPrice }}元/晚</span>
                      </div>
                      <div style="display:flex;align-items:center;">
                        <label>房态：</label>
                        <span>{{ roomTypes[item.type].name }}</span>
                      </div>
                    </div>
                  </li>
                  <li class="right_common_li roomRemark">
                    <div class="flexBox oneColumn">
                      <div class="alignItem_start">
                        <label class="fourChar">备注:</label>
                        <span class="remark_ellipsis">{{item.roomDesc}}</span>
                      </div>
                    </div>
                  </li>
                  <li class="right_common_li roomRemark" v-if="item.reserState == 1">
                    <div class="flexBox oneColumn">
                      <div class="alignItem_start">
                        <label class="fourChar">预定信息</label>
                      </div>
                      <div class="alignItem_start">
                        <label class="fourChar" style="width: 80px;">到店时间：</label>
                        <span class="remark_ellipsis">{{item.reserStartTime}}</span>
                      </div>
                      <div class="alignItem_start">
                        <label class="fourChar" style="width: 80px;">离店时间：</label>
                        <span class="remark_ellipsis">{{item.reserStopTime}}</span>
                      </div>
                      <div class="alignItem_start">
                        <label class="fourChar">预订人：</label>
                        <span class="remark_ellipsis">{{item.reserName}}</span>
                      </div>
                      <div class="alignItem_start">
                        <label class="fourChar">电话：</label>
                        <span class="remark_ellipsis">{{item.reserTel}}</span>
                      </div>
                      <div class="alignItem_start">
                        <label class="fourChar">备注：</label>
                        <span class="remark_ellipsis">{{item.reserRemarks}}</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 房间 -->
              <div 
                slot="reference" 
                @contextmenu.prevent="contextmenuClick($event, item)" 
                @dblclick="cellDblclick(item)"
                @click="clickCell(item)" 
                :style="'background: ' + getRoomColor(item)"
                class="vc card" 
                :class="[cellTypeClass[setting.cellType + ''], { FloorBreak: item.isBreak }]"
                v-if="setting.cellType !== undefined">
                <div class="room-box-content card">
                  <div class="room-num">
                    <span v-if="shownContent['rn']" :style="'font-size:' + fontSizes['rn'] + 'px;color:' + stateTextColors['rn']">{{ item.roomSign }}{{ item.roomNum }}</span>
                    <span v-if="shownContent['rt']" class="room-type ellipsis" :style="'font-size:' + fontSizes['rt'] + 'px;color:' + stateTextColors['rt']">{{ item.roomName }}</span>
                  </div>
                  <!-- 房客姓名 -->
                  <div class="room-price ellipsis" 
                  :style="'font-size:' + fontSizes['na'] + 'px;color:' + stateTextColors['na']"
                  v-if="item.lockType !== 0 && item.peopleEntities&& item.peopleEntities.length > 0 && shownContent['na']">
                    <span>
                      {{ item.peopleEntities[0].name }}
                    </span>
                    <i class="icon-txt icon-txt-mei" 
                        v-if="1==1">美</i>
                  </div>
                  <!-- 占房时间 -->
                  <div class="room-price ellipsis" 
                  v-if="item.lockType !== 0 && item.peopleEntities&& item.peopleEntities.length > 0">
                    <span>
                      <span v-if="shownContent['da']" :style="'font-size:' + fontSizes['da'] + 'px;color:' + stateTextColors['da']">{{ item.siroomsDays }}天</span>
                      <span v-if="shownContent['ti']" :style="'font-size:' + fontSizes['ti'] + 'px;color:' + stateTextColors['ti']">
                        <span v-if="shownContent['da']">/</span>{{ item.pepredissociationTime.substring(5, 10) }}</span>
                    </span>
                  </div>
                  <!-- 价格 -->
                  <div class="room-price ellipsis" 
                  :style="'font-size:' + fontSizes['pr'] + 'px;color:' + stateTextColors['pr']"
                  v-if="shownContent['pr'] && item.lockType !== 0 && item.roomOprice !== undefined &&(item.type >= 0 && item.type <= 3)">
                    <span v-if="item.singleNo > 0 && item.isSingle == 1">
                      ￥{{ item.roomOprice }}/付{{ item.lianpayment }}/余{{(item.lianpayment + item.lianyushouquan + item.liandeposit - item.lianconsumption).toFixed(2)}} 
                    </span>
                    <span v-if="item.singleNo == 0 && item.isSingle == 1">
                      ￥{{ item.roomOprice }}/付{{ item.pepayment }}/余{{(item.pepayment + item.pedeposit + item.payPrice - item.peconsumption).toFixed(2)}} 
                    </span>
                    <span v-if="item.singleNo > 0 && item.isSingle != 1">
                      ￥{{ item.roomOprice }}/晚 
                    </span>
                    <span v-if="item.singleNo == 0 && item.isSingle != 1">
                      ￥{{ item.roomOprice }}/晚 
                    </span>
                  </div>
                  <div class="icon_group">
                    <div class="left_group clear_float">
                      <i class="icon-txt icon-txt-dirty" 
                        v-if="shownIcons['dirty'] && item.type === 1 || item.type == 3">脏</i>
                      <i class="icon-txt icon-txt-maint" 
                        v-if="shownIcons['maint'] && item.type == 4">维</i>
                      <i class="icon-txt icon-txt-arrears" 
                        v-if="shownIcons['arrears'] && item.lianpayment - item.lianconsumption < 0 && item.singleMain == 1 && item.isSingle == 1">欠</i>
                      <i class="icon-txt icon-txt-ding" 
                        v-if="item.reNumDay === 0 && item.isSingle == 4">订</i>
                      <i class="icon-txt icon-txt-li" 
                        v-if="shownIcons['li'] && item.numDay === 0 && item.isSingle == 1">离</i>  
                      <i class="icon-txt icon-txt-hour" 
                        v-if="shownIcons['hour'] && item.sicheckinType == 1">钟</i>
                      <i class="icon-txt icon-txt-twin" 
                      v-if="shownIcons['twin'] && item.singleNo != 0 && item.isSingle == 1">联{{item.singleNo}}</i>       
                    </div>
                  </div>
                </div>
                <div class="post_mark">
                  <div class="lock-icon-box" v-if="item.lockType == 0 || item.type == 5">
                    <i class="el-icon-lock"></i>
                  </div>
                  
                </div>
                <div class="select_cell" v-if="item.checked">
                  <div class="select_gou_icon">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
              </div>
            </el-popover>

          </div>
          <!-- 楼层&房间 -->
          <!-- 
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(item, index) in dataList" :key="item.id" :name="index">
              <template slot="title">
                <div class="floor-num">
                  {{item.fpname}} {{item.fname}}
                  <el-divider direction="vertical" style="background-color:#ccc;"></el-divider> 
                  <span class="floor-desc">12间：在住5间/空置12间</span>
                </div>
              </template>
              <div>测试内容</div>
            </el-collapse-item>
          </el-collapse>
          -->
        </el-main>
      </el-container>

      <!-- 右边侧边栏 -->
      <el-aside :width="rightWidth + 'px'" class="scrollbar room-type-box" height="850px" style="overflow-y: scroll;">
        <dl class="row_dl real_time">
          <dt class="bold">
            楼栋楼层
          </dt>
          <dd>
            <div class="filter clear_float">
              <el-select style="width:48%" clearable  v-model="dataForm.parentId" @change="onBuildingChange" placeholder="全部楼栋">
                <el-option
                  v-for="item in buildings"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select style="width:48%" clearable  v-model="dataForm.floorId" @change="onFloorChange" placeholder="全部楼层">
                <el-option
                  v-for="item in floors"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            房态
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ typeMapCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selecedRoomTypes" >
                <el-checkbox :style="'width:44%;margin: 4px 0;' " v-for="(item, index) in roomTypes" :key="index" @change="selectQueryOption(item, index, 'type')" :label="item.name">{{item.name}}<span>{{ typeMap[index + ''] ? typeMap[index + ''] : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
            
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            入住类型
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ typeMapCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedCheckinTypes" >
                <el-checkbox style="width:44%;margin: 4px 0;" v-for="(item, index) in checkinTypeList" :key="index" @change="selectQueryOption(item, index, 'checkinType')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            联房筛选
          </dt>
          <dd>
            <div class="filter clear_float">
              <el-select v-model="dataForm.singleNo" @change="sellianchange" clearable placeholder="请选择">
                <el-option label="全部" value="all"></el-option>
                <el-option v-for="item in twinRoomOptions" :key="item.singleNo" :label="'联'+item.singleNo" :value="item.singleNo">
                  <span style="float: left">联房{{ item.singleNo }}组</span>
                  <span style="float: left; margin-left:10px;color: #8492a6; font-size: 13px">{{ item.count }}间</span>
                </el-option>
              </el-select>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            团队筛选
          </dt>
          <dd>
            <div class="filter clear_float">
              <el-select v-model="dataForm.singleNo" @change="sellianchange" clearable placeholder="请选择">
                <el-option label="全部" value="all"></el-option>
                <el-option v-for="item in twinRoomOptions" :key="item.singleNo" :label="'联'+item.singleNo" :value="item.singleNo">
                  <span style="float: left">{{ item.singleNo }}/</span>
                  <span style="float: left; margin-left:10px;color: #8492a6; font-size: 13px">{{ item.count }}间</span>
                </el-option>
              </el-select>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            来源
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ typeMapCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedTenantSourceTypes" >
                <el-checkbox style="width:44%;margin: 4px 0;" v-for="(item, index) in tenantSourceTypeList" :key="index" @change="selectQueryOption(item, index, 'tenantSourceType')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            房型
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ roomCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedHouseTypes" >
                <el-checkbox :style="'width:' + (item.name.length > 4 ? '100%' : '44%') + ';margin: 4px 0;'" v-for="(item, index) in roomTypeList" :key="index" @change="selectQueryOption(item, index, 'room')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            客人类型
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ roomCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedTenantTypes" >
                <el-checkbox style="width:44%;margin: 4px 0;" v-for="(item, index) in tenantTypeList" :key="index" @change="selectQueryOption(item, index, 'tenantType')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            在住状态
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ roomCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedStates" >
                <el-checkbox style="width:44%;margin: 4px 0;" v-for="(item, index) in stateList" :key="index" @change="selectQueryOption(item, index, 'state')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <dl class="row_dl real_time">
          <dt class="bold">
            对客服务
            <span style="margin-left: 5px; font-weight: normal;font-size: 16px;">|全部 {{ roomCount }}</span>
          </dt>
          <dd>
            <div class="filter clear_float">
              <div style="margin: 15px 0;"></div>
              <el-checkbox-group v-model="selectedGuestServices" >
                <el-checkbox style="width:44%;margin: 4px 0;" v-for="(item, index) in guestServiceList" :key="index" @change="selectQueryOption(item, index, 'state')" :label="item.name">{{item.name}}<span>{{ item.count ? item.count : '0' }}</span></el-checkbox>
              </el-checkbox-group>
            </div>
          </dd>
        </dl>
        <div v-if="rightWidth === 0" alt class="arrow-content left-icon-content" :style="'right:' + (rightWidth === 0 ? '0' : '240') +'px'" @click="setRightWidth(245)">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div v-else class="arrow-content right-icon-content" :style="'right:' + (rightWidth === 0 ? '0' : '240') +'px'" @click="setRightWidth(0)">
          <i class="el-icon-arrow-right"></i>
        </div>

      </el-aside>
    </el-container>
    <!-- 左边房态提示悬浮按钮 -->
    <div ref="dragDiv" class="float-drag-button">
      <el-tooltip content="显示下方房态说明" placement="right">
        <span>房态说明</span>
      </el-tooltip>
      
    </div>

    <el-footer style="height: 136px;line-height: 40px;border-top: 1px solid #ccc;">
      <!-- 房态说明，可改为遍历写法 -->
      <el-row v-if="showRoomStateDesc">
        <el-col :span="2" style="font-weight: bold;">房态说明</el-col>
        <el-col :span="22">
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['oc']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">住净</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['od']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">住脏</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['vc']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">空净</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['vd']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">空脏</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['ar']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">欠费</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['pd']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">今日预离</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['pa']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">今日预抵</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['ooo']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">锁房/脏房</span>
          </el-col>
          <el-col :span="2">
            <div class="color-block" :style="'background-color: ' +  stateColors['ho']['color']  + ';'"></div>
            <span style="line-height: 18px;vertical-align: middle;">钟点房</span>
          </el-col>
        </el-col>
      </el-row>
      <!-- 图标说明 -->
      <el-row  v-if="showRoomStateDesc">
        <el-col :span="2" style="font-weight: bold;">图标说明</el-col>
        <el-col :span="22" style="display:flex;align-items: center;justify-content: space-between;">
          <div style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-mei">美</i>
            <span> 美团</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-ctrip">携</i>
            <span> 携程</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-fli">飞</i>
            <span> 飞猪</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-qunr">去</i>
            <span> 去哪儿</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-elong">同</i>
            <span style="font-size: 10px;"> 同程艺龙</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-dou">抖</i>
            <span> 抖音</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-vx">微</i>
            <span style="font-size: 10px;"> 微信订房</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-vip">VIP</i>
            <span> 会员</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-maint">维</i>
            <span> 维修</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-arrears">欠</i>
            <span> 欠费</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-dirty">脏</i>
            <span> 脏房</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-ding">订</i>
            <span> 预订</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="el-icon-alarm-clock icon-txt-hour"></i>
            <span> 钟点房</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-twin">联1</i>
            <span style="font-size: 10px;"> 联房1组</span>
          </div>
          <div :span="2" style="height: 42px;overflow: hidden;">
            <i class="icon-txt icon-txt-li">离</i>
            <span style="font-size: 10px;"> 今日预离</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-tooltip class="item" effect="dark" :content="'夜审日：'+nightTrialSellerEntity.lastNightTrialTime" placement="bottom"
          :open-delay="700">
          <span style="font-size: 20px;" @click="checkNighTrialBtn" v-if="nightTrialSellerEntity.autoCheck == 0 && nightTrialSellerEntity.lastNightState == 0"
            class="el-icon-moon-night"></span>
          <span style="font-size: 20px;" v-else class="el-icon-moon"></span>
        </el-tooltip>
      </el-row>
      
    </el-footer>

    <!-- 设置窗口 -->
    <el-dialog class="setting-dialog" title="房态显示设置" :center="true" :visible.sync="settingDialogVisible" width="50%">
      <el-form :model="setting" style="font-size: 15px;">
        <el-row :gutter="20">
          <el-col :span="24" style="padding: 6px;"> 
            <span style="font-size : 20px;color : rgb(255, 141, 26);">|排列设置</span>
            <el-divider style="background-color: #ccc;"></el-divider>
          </el-col>
          <el-col :span="24">
            <el-form-item label="房间排列方式">
              <el-radio-group v-model="setting.sortType">
                <el-radio :label="0">平铺不分行</el-radio>
                <el-radio :label="1">按楼层分行</el-radio>
                <el-radio :label="3">按房型分行</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="顶部筛选方式">
              <el-radio-group v-model="setting.topFilterMode">
                <el-radio :label="1">按房型筛选</el-radio>
                <el-radio :label="2">按房态筛选</el-radio>
                <el-radio :label="3">按楼栋楼层筛选</el-radio>
                <el-radio :label="0">不显示筛选</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24" style="padding: 6px;"> 
            <span style="font-size : 20px;color : rgb(255, 141, 26);">|颜色设置</span>
            <el-divider style="background-color: #ccc;"></el-divider>
          </el-col>
          <!-- 房态底色 -->
          <el-col :span="5">房态底色及是否启用:</el-col>
          <el-col :span="18">
            <el-col :span="8">
              <el-form-item >
                <el-color-picker v-model="stateColors['oc']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" :disabled="true" v-model="stateColors['oc']['checked']">住净</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['od']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" :disabled="true" v-model="stateColors['od']['checked']">住脏</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['vc']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" :disabled="true" v-model="stateColors['vc']['checked']">空净</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['vd']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" :disabled="true" v-model="stateColors['vd']['checked']">空脏</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['ooo']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" :disabled="true" v-model="stateColors['ooo']['checked']">锁房/脏房</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['ar']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" v-model="stateColors['ar']['checked']">欠费</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['pd']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" v-model="stateColors['pd']['checked']">今日预离</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['pa']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" v-model="stateColors['pa']['checked']">今日预抵</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-color-picker v-model="stateColors['ho']['color']"></el-color-picker>
                <el-checkbox class="custom-checkbox" v-model="stateColors['ho']['checked']">钟点房</el-checkbox>
              </el-form-item>
            </el-col>
          </el-col>
          <!-- 房态字体颜色 -->
          <el-col :span="4">房态文字颜色:</el-col>
          <el-col :span="18">
            <el-col :span="6">
              <el-form-item label="房号">
                <el-color-picker v-model="stateTextColors['rn']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房型">
                <el-color-picker v-model="stateTextColors['rt']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="姓名">
                <el-color-picker v-model="stateTextColors['na']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="房价">
                <el-color-picker v-model="stateTextColors['pr']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="时间">
                <el-color-picker v-model="stateTextColors['ti']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="天数">
                <el-color-picker v-model="stateTextColors['da']"></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="财务">
                <el-color-picker v-model="stateTextColors['ac']"></el-color-picker>
              </el-form-item>
            </el-col>
          </el-col>

          <!-- 图标文字及底色 -->
          <el-col :span="4">图标文字及底色:</el-col>
          <el-col :span="18">
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-mei">美</i>
                <span> 美团</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-ctrip">携</i>
                <span> 携程</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-fli">飞</i>
                <span> 飞猪</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-qunr">去</i>
                <span> 去哪儿</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-elong">同</i>
                <span style="font-size: 10px;"> 同程艺龙</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-dou">抖</i>
                <span> 抖音</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-vx">微</i>
                <span style="font-size: 10px;"> 微信订房</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-vip">VIP</i>
                <span> 会员</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-maint">维</i>
                <span> 维修</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-arrears">欠</i>
                <span> 欠费</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-dirty">脏</i>
                <span> 脏房</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-ding">订</i>
                <span> 预订</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="el-icon-alarm-clock icon-txt-hour"></i>
                <span> 钟点房</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-twin">联1</i>
                <span style="font-size: 10px;"> 联房1组</span>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="height: 42px;overflow: hidden;">
              <el-form-item>
                <i class="icon-txt icon-txt-li">离</i>
                <span style="font-size: 10px;"> 今日预离</span>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>

        <!-- 尺寸设置 -->
        <el-row :gutter="20">
          <el-col :span="24" style="padding: 6px;"> 
            <span style="font-size : 20px;color : rgb(255, 141, 26);">|尺寸设置</span>
            <el-divider style="background-color: #ccc;"></el-divider>
          </el-col>
          <el-col :span="4">房态格大小:</el-col>
          <el-col :span="18">
            <el-form-item>
              <el-radio-group v-model="setting.cellType" size="small">
                <el-radio-button :label="0">最小</el-radio-button>
                <el-radio-button :label="1">小</el-radio-button>
                <el-radio-button :label="2">适中</el-radio-button>
                <el-radio-button :label="3">大</el-radio-button>
                <el-radio-button :label="4">最大</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="4">字号大小:</el-col>
          <el-col :span="18">
            <el-col :span="8">
              <el-form-item label="房号">
                <el-input-number v-model="fontSizes['rn']" :min="1" :max="30" label="房号"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="房型">
                <el-input-number v-model="fontSizes['rt']" :min="1" :max="30" label="房型"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input-number v-model="fontSizes['na']" :min="1" :max="30" label="姓名"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="房价">
                <el-input-number v-model="fontSizes['pr']" :min="1" :max="30" label="房价"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时间">
                <el-input-number v-model="fontSizes['ti']" :min="1" :max="30" label="时间"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="天数">
                <el-input-number v-model="fontSizes['da']" :min="1" :max="30" label="天数"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账务">
                <el-input-number v-model="fontSizes['ac']" :min="1" :max="30" label="账务"></el-input-number>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>

        <!-- 显示内容设置 -->
        <el-row :gutter="20">
          <el-col :span="24" style="padding: 6px;"> 
            <span style="font-size : 20px;color : rgb(255, 141, 26);">|显示内容设置</span>
            <el-divider style="background-color: #ccc;"></el-divider>
          </el-col>
          <el-col :span="4">房态图显示内容:</el-col>
          <el-col :span="18">
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['rn']">房号</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['rt']">房型</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['na']">姓名</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['pr']">房价</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['ti']">时间</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['da']">天数</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['spent']">消费金额</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['paid']">已付金额</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownContent['balance']">余额</el-checkbox>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="4">房态图图标显示:</el-col>
          <el-col :span="18">
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['sc']">渠道来源</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['vip']">VIP</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['maint']">维修</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['ar']">欠费</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['dirty']">脏房</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['ding']">预定</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['hour']">钟点</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['twin']">联房</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['pd']">预离</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['lock']">锁房</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['checkin']">入住类型</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-checkbox v-model="shownIcons['rental']">物品租借</el-checkbox>
              </el-form-item>
            </el-col>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetRoomStateSetting">恢复系统预设值</el-button>
        <el-button @click="settingDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoomStateSetting">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 右键菜单 -->
    <div class="contextmenu_div" v-show="contextmenuDivVisible" ref="contextmenuDiv">
      <div class="left_div">
        <ul class="left_ul">
          <li class="left_common_li" v-if="item2.lockType != 0 && item2.type != 4 && item2.isSingle != 1">
            <div v-if="isAuth('hotel:thotelfloorroomcheckinsingle:ruzhu')" class="left_common_div" @click="cellDblclick(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-ruzhu"></i>入住
            </div>
            <div v-if="isAuth('hotel:thotelfloorroomcheckinsingle:reserve')" class="left_common_div" @click="reserve([item2])">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-weibiaoti-"></i>预订
            </div>
          </li>

          <li class="left_common_li" v-else-if="item2.lockType != 0 && item2.isSingle == 1">
            <div class="left_common_div" @click="toAccounting(item2,'1')">
              <i class="iconfont icon-xiangqing"></i>详单
            </div>
            <div class="left_common_div" @click="toAccounting(item2,'2')">
              <i class="iconfont icon-zhangdan-tianchong"></i>账单
            </div>
          </li>
          <li class="left_common_li" v-if="item2.lockType == 0 && isAuth('hotel:thotelfloorroom:changeState')">
            <div class="left_common_div" @click="unlock">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-shenqingjiechu"></i>解除锁定
            </div>
          </li>
          <li class="left_common_li" v-if="item2.type == 4 && isAuth('hotel:thotelfloorroom:changeState')">
            <div class="left_common_div" @click="setClear('weixiu')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-lifted"></i>解除维修
            </div>
          </li>
          <li class="left_common_li" v-if="item2.lockType != 0 && item2.type != 4">
            <div class="left_common_div" v-if="(item2.type == 1 || item2.type == 3) && isAuth('hotel:tsellerclear:one')"
              @click="showzzhuf(item2,'1')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-caozuo-shoudong"></i>置干净
            </div>
            <div class="left_common_div" v-else-if="isAuth('hotel:thotelfloorroom:setType2')" @click="setClear('dirty')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-caozuo-shoudong"></i>置脏
            </div>
            <div class="left_common_div" v-if="(item2.type == 0 || item2.type == 1) && isAuth('hotel:thotelfloorroom:updatetype')"
              @click="weixiuBtn(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-weixiu"></i>置维修
            </div>
            <!--          <div class="left_common_div" v-if="item2.type == 1 || item2.type == 3" @click="showzzhuf(item2)">脏住房打扫</div> -->
            <!-- <div class="left_common_div">查房</div> -->
            <div class="left_common_div" @click="open" v-if="item2.isSingle != 1 && isAuth('hotel:thotelfloorroom:changeState')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-s锁房uoding"></i>
            </div>
          </li>
          <li class="left_common_li" v-if="item2.isSingle != 0">
            <div class="left_common_div" v-if="item2.isSingle == 1 && isAuth('hotel:thotelfloorroomcheckinaccounting:save1')"
              @click="ruzhangHandle(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-baozhengjinruzhangmingxichaxun"></i>入账
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1 && isAuth('hotel:thotelfloorroomcheckinpeople:xuzhu')"
              @click="xuzhuTiqian(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-xuqi"></i>续住/提前
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1" @click="DoorNewCard(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-fkfangqia-"></i>制房卡
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1" @click="DoorCancelCard(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-zhuxiaologout10"></i>注销房卡
            </div>

            <div class="left_common_div" @click="changeRoom(item2)" v-if="isAuth('hotel:thotelfloorroomcheckinpeople:change_room')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-huanhuo"></i>换房
            </div>
            <div class="left_common_div" @click="joinRoomBtn(item2.singleId)" v-if="isAuth('hotel:thotelfloorroomcheckinsingle:join_united_house')">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-lianhe"></i>合并联房
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1 && isAuth('hotel:thotelfloorroomcheckinpeople:save1')"
              @click="addPeopleBtn(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-tongzhuren"></i>添加同住
            </div>
            <div class="left_common_div" v-if="item2.singleNo != 0 && isAuth('hotel:thotelfloorroomcheckinsingle:exit_single')"
              @click="etixRoom(item2.id)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-tuichu"></i>退出联房
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1 && isAuth('hotel:thotelfloorroomcheckinaccounting:united_house')"
              @click="jieZhangTuiFang(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-yicijiezhang"></i>结账退房
            </div>
            <div class="left_common_div" v-if="item2.isSingle == 1" @click="cancellationBtn(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-yicijiezhang"></i>撤销入住
            </div>
          </li>
          <li class="left_common_li">
            <div class="left_common_div" @click="viewLog(item2)">
              <i style="font-size: 14px;margin-right: 4px;" class="iconfont icon-rizhi"></i>日志
            </div>
          </li>
        </ul>
      </div>
      <div class="right_div" v-if="item2.lockType == 0 || item2.type == 4">
        <ul class="right_ul">
          <li class="right_common_li">
            <div class="flexBox oneColumn">
              <div>
                <label class="fourChar" v-if="item2.lockType == 0">锁房时间:</label>
                <label class="fourChar" v-if="item2.type == 4">维修时间:</label>
                <span>{{ item2.typeStartTime }}</span>
              </div>
              <div v-if="item2.type == 4">
                <label class="fourChar">维修结束:</label>
                <span>{{ item2.typeStopTime }}</span>
              </div>
              <div class="flexDirection alignItem_start">
                <label class="fourChar" v-if="item2.lockType == 0">锁房原因:</label>
                <label class="fourChar" v-if="item2.type == 4">维修原因:</label>
                <div class="remark_ellipsis">{{ item2.typeDesc }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 弹窗, 维修 -->
    <fangtaiWeixiu v-if="fangtaiWeixiuVisible" ref="fangtaiWeixiu" @refreshDataList="getDataList"></fangtaiWeixiu>
    <floorroomlog v-if="floorroomlogVisible" ref="floorroomlog" @refreshDataList="getDataList"></floorroomlog>
    <checkin v-if="checkinDialogVisible" ref="checkin" @refreshDataList="getDataList" :max="max"></checkin>
    <changeRoom v-if="changeRoomVisible" ref="changeRoom" @refreClosing="getDataList"></changeRoom>
    <joinRoom v-if="joinRoomVisible" ref="joinRoom" @refreClosing="getDataList"></joinRoom>
    <xuzhuTiqian v-if="xuzhuTiqianVisible" ref="xuzhuTiqian" @refreClosing="getDataList" @refreshDataList="getDataList()"></xuzhuTiqian>
    <closingRoom v-if="closingRoomVisible" ref="closingRoom" @refreClosing="getDataList" @refreshDataList="getDataList()"></closingRoom>
    <ruzhang v-if="ruzhangVisible" ref="ruzhang" @refreshDataList="getDataList()"></ruzhang>
    <addPeople v-if="addPeopleVisible" ref="addPeople" @refreClosing="unRoom" @refreshDataList="getInfo()"></addPeople>

    <el-dialog v-if="showzzf" width="28%" height="12%" style="overflow-y: hidden;" title="清理房间" :visible.sync="showzzf">
      <el-form :model="formwaiter" label-width="100px">
        <el-form-item label="服务员姓名" prop="waiterId">
          <el-select v-model="formwaiter.waiterId" placeholder="请选择">
            <el-option v-for="item in twaiterlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remack">
          <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="formwaiter.remack"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showzzf=false">取消</el-button>
        <el-button type="primary" :disabled="formwaiter.waiterId==''" @click="savewaiter()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        // if (el.contains(e.target)) {
        //   return false;
        // }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
          binding.value(e);
        }
      }
      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.__vueClickOutside__ = documentHandler;
      document.addEventListener("click", documentHandler);
    },
    update() {},
    unbind(el, binding) {
      // 解除事件监听
      document.removeEventListener("click", el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    },
  };
  import $ from "jquery";
  import fangtaiWeixiu from "./fangtai-weixiu";
  import floorroomlog from "./floorroomlog";
  import checkin from "./floorroomruzhu";
  import changeRoom from "../floorRoomSign/changeRoom";
  import joinRoom from '../floorRoomSign/reserve/join/index';
  import closingRoom from "../floorRoomSign/closingRoom";
  import xuzhuTiqian from "../floorRoomSign/xuzhuTiqian";
  import ruzhang from "../floorRoomSign/ruzhang";
  import addPeople from "../floorRoomSign/addPeople";
  import moment from 'moment';
  $(".el-popover.el-popper").click(function() {
    console.log(123);
    $(this).popover('hide');
  });
  export default {
    data() {
      return {
        //test
        num: 12,
        checked: true,

        //顶部筛选滚动栏
        roomType:'',
        showLeftIcon: true,
        showRightIcon: true,
        leftArr: [],

        //right width
        rightWidth: 245,

        queryCondition: {},
        buildingFlag: true,
        floorFlag: true,
        selectSign: {
          dirty: false,
          jing: false,
          lock: false,
          weixiu: false,
          ruzhu: false,
          yuding: false,
          lianfang: false,
        },
        selectRoom: [],
        zwxroom: 0,
        currDate: moment().format("YYYY-MM-DD"),
        queryFrom: {
          fjhao: "",
        },
        twaiterlist: [],
        formwaiter: {
          waiterId: "",
          floorRoomId: "",
          creatUserId: "",
          ceeatTime: "",
          remack: "",
          sellerId: "",
        },
        alertShow: false,
        max: false,
        tenantSourceTypeList: [
          {
            name: "今日到",
            val: "0",
            count: "",
            checked: false,
            topname: "到",
          },
          {
            name: "今日离",
            val: "1",
            count: "",
            checked: false,
            topname: "离",
          },
          {
            name: "美团",
            val: "3",
            count: "",
            checked: false,
            topname: "团",
          },
          {
            name: "飞猪",
            val: "4",
            count: "",
            checked: false,
            topname: "猪",
          },
          {
            name: "携程",
            val: "5",
            count: "",
            checked: false,
            topname: "携",
          },
          {
            name: "官网",
            val: "6",
            count: "",
            checked: false,
            topname: "官",
          },
          {
            name: "步入",
            val: "7",
            count: "",
            checked: false,
            topname: "步",
          },
          {
            name: "团队",
            val: "8",
            count: "",
            checked: false,
            topname: "队",
          },
          {
            name: "艺龙",
            val: "9",
            count: "",
            checked: false,
            topname: "艺",
          },
          {
            name: "微信",
            val: "10",
            count: "",
            checked: false,
            topname: "微",
          },
          {
            name: "去哪",
            val: "11",
            count: "",
            checked: false,
            topname: "哪",
          },
          {
            name: "抖音",
            val: "12",
            count: "",
            checked: false,
            topname: "抖",
          },
          {
            name: "散客",
            val: "2",
            count: "",
            checked: false,
            topname: "散",
          },
        ],
        tenantTypeList: [
          {
            name: "散客",
            val: "0",
            count: "",
            checked: false,
            topname: "散",
          },
          {
            name: "会员",
            val: "1",
            count: "",
            checked: false,
            topname: "会",
          },
          {
            name: "协议单位",
            val: "2",
            count: "",
            checked: false,
            topname: "协",
          }
        ],
        checkinTypeList: [{
            name: "全天",
            val: "0",
            count: "",
            checked: false,
            topname: "全",
          },
          {
            name: "时租",
            val: "1",
            count: "",
            checked: false,
            topname: "时",
          },
          {
            name: "长包",
            val: "4",
            count: "",
            checked: false,
            topname: "长",
          },
          {
            name: "自用",
            val: "2",
            count: "",
            checked: false,
            topname: "自",
          },
          {
            name: "免费",
            val: "3",
            count: "",
            checked: false,
            topname: "免",
          },
          {
            name: "团队",
            val: "5",
            count: "",
            checked: false,
            topname: "团",
          },
        ],
        stateList: [{
            name: "欠费",
            val: "0",
            count: "",
            checked: false,
            topname: "欠",
          },
          {
            name: "续住",
            val: "2",
            count: "",
            checked: false,
            topname: "续",
          },
          // {
          //   name: "换房",
          //   val: "3",
          //   count: "",
          //   checked: false,
          //   topname: "换",
          // },
          {
            name: "租借",
            val: "4",
            count: "",
            checked: false,
            topname: "借",
          },
          {
            name: "无押金",
            val: "1",
            count: "",
            checked: false,
            topname: "押",
          },
        ],
        guestServiceList: [
          // {
          //   name: "生日",
          //   val: "0",
          //   count: "",
          //   checked: false,
          // },
          {
            name: "叫醒",
            val: "1",
            count: "",
            checked: false,
          },
          {
            name: "免打扰",
            val: "2",
            count: "",
            checked: false,
          },
          {
            name: "免查询",
            val: "3",
            count: "",
            checked: false,
          },
        ],
        forms: {
          roomNum: "",
          roomSign: "",
          creatTime: "",
          arrivalsTime: "",
          predissociationTime: "",
        },
        addPeopleVisible: false,
        ruzhangVisible: false,
        closingRoomVisible: false,
        changeRoomVisible: false,
        joinRoomVisible: false,
        xuzhuTiqianVisible: false,
        roomLoading: false,
        item2: {},
        selectRoomsec: {},
        nightTrialSellerEntity: {
          /*
          商家
          private Long sellerId;
          更新日期
          private String updateTime;
          自动夜审(1启用0禁用)
          private Integer autoCheck;
          最后一次夜审时间
          private String lastNightTrialTime;
          夜审时间设置
          private String setNightTrialTime;
          手动(1是0禁用)
          private Integer lastNightState;
          自动交班(1启用0禁用)
          private Integer autoHand;
          */
        },
        selType: true,
        settingDialogVisible: false,
        contextmenuDivVisible: false,
        fangtaiWeixiuVisible: false,
        floorroomlogVisible: false,
        checkinDialogVisible: false,
        buildings:[],
        floors: [],
        floorOptions: [],
        twinRoomOptions: [],
        is: '',
        dataForm: {
          key: "",
          singleNo: "all",
          floorIds: "",
          parentId: undefined,
          floorId: undefined
        },
        // showQuery: false,
        dataList: [],
        page: 1,
        limit: 100,
        lastScrollTop: 0, // 保存滚动位置
        totalCount: 0, // 房间总数量
        lazyDataList: [],
        roomTypeList: [],//房型列表
        cellTypeClass: {
          "0": "room-box-small",
          "1": "room-box-big-small",
          "2": "room-box-middle",
          "3": "room-box-big-middle",
          "4": "room-box-max",
        },
        roomCount: 0,
        //配置项
        color: {},
        stateColors:{
          "oc":{
            "name": "住净",
            "color": "rgb(64, 144, 234)",
            "checked": true
          },
          "od":{
            "name": "住脏",
            "color": "rgb(2, 52, 109)",
            "checked": true
          },
          "vc":{
            "name": "空净",
            "color": "rgb(67, 207, 124)",
            "checked": true
          },
          "vd":{
            "name": "空脏",
            "color": "rgb(166, 166, 166)",
            "checked": true
          },
          "ooo":{
            "name": "锁房/脏房",
            "color": "rgb(128, 128, 128)",
            "checked": true
          },
          "ar":{
            "name": "欠费",
            "color": "rgb(255, 87, 51)",
            "checked": true
          },
          "pd":{
            "name": "今日预离",
            "color": "rgb(172, 51, 193)",
            "checked": true
          },
          "pa":{
            "name": "今日预抵",
            "color": "rgb(255, 141, 26)",
            "checked": true
          },
          "ho":{
            "name": "钟点房",
            "color": "rgb(188, 104, 42)",
            "checked": true
          }
        },
        stateTextColors:{
          "rn": "#fff",
          "rt": "#fff",
          "na": "#fff",
          "pr": "#fff",
          "ti": "#fff",
          "da": "#fff",
          "ac": "#fff"
        },
        shownContent:{
          "rn": true,
          "rt": true,
          "na": true,
          "pr": true,
          "ti": true,
          "da": true, 
          "spent": true,
          "paid": true,
          "balance": true
        },
        shownIcons:{
          "sc": true,
          "vip": true,
          "maint": true,          
          "ding": true,
          "dirty": true,
          "ar": true,
          "hour": true,
          "twin": true,
          "pd": true,
          "lock": true,
          "checkin": true,
          "rental": true
        },
        fontSizes:{
          "rn": 14,
          "rt": 14,
          "na": 14,
          "pr": 14,
          "ti": 14,
          "da": 14,
          "ac": 14
        },

        doorLockParams: {
          RoomNumber: "",
          StartDate: "",
          EndDate: "",
          OpeartorType: "",
          CardID: "",
          skr: "",
          sfz: "",
          CardNum: "",
        },
        popperOptions: {
          boundariesElement: "body",
          gpuAcceleration: false,
        },
        setMaintainName: "置维修",
        showzzf: false,
        dataFormsa: {
          skTime: "",
          zkUser: "",
          roomNum: "",
          kaNo: "",
          creatUserId: "",
          endTime: "",
          ckSfz: "",
          operation: "",
          creatTime: "",
          floorCengId: "",
          floorId: "",
        },
        roomTypes: [{
            name: "空净",
            checked: false,
          },
          {
            name: "空脏",
            checked: false,
          },
          {
            name: "住净",
            checked: false,
          },
          {
            name: "住脏",
            checked: false,
          },
          {
            name: "维修",
            checked: false,
          },
          {
            name: "锁房",
            checked: false,
          },
        ],
        selecedRoomTypes: [],
        selectedCheckinTypes: [],
        selectedTenantSourceTypes: [],//选中的客人来源
        selectedTenantTypes: [], //选中的客人类型
        selectedHouseTypes: [],
        selectedStates: [],//选中的在住状态
        selectedGuestServices: [],//选中的对客服务

        colorCount: [0, 0, 0, 0, 0, 0],
        typeMap: {},
        istrues: 0,
        typeMapCount: 0,
        setting: {},
        popoverOffsetY: 0,
        floorRoomSocket: null,

        // 楼层折叠
        activeNames: ['0'],

        roomStates:['vc','vd','oc','od','ooo','ooo'],
        //房态说明显示开关
        showRoomStateDesc: false
      };
    },
    computed: {
      containerStyle() {
        let style = {};
        let clacWidth = 0;
        if (this.showLeftIcon) {
          clacWidth += 40;
          const leftStyle = {
            'margin-left': '40px',
            width: `calc(100% - ${clacWidth}px)`,
          };
          style = { ...leftStyle };
        }
        if (this.showRightIcon) {
          clacWidth += 40;
          const leftStyle = {
            width: `calc(100% - ${clacWidth}px)`,
          };
          style = { ...style, ...leftStyle };
        }
        return style;
      }
    },
    directives: {
      clickoutside,
    },
    components: {
      fangtaiWeixiu,
      floorroomlog,
      checkin,
      changeRoom,
      joinRoom,
      closingRoom,
      xuzhuTiqian,
      ruzhang,
      addPeople,
    },
    activated() {
      //筛选条件查询
      this.getRoomType();
      this.getFloorList(0);
      //房态数据查询
      this.getDataList();

      this.nightTrialSeller();
      this.gettwaiterlist();
      //  禁止滚动条
      document.querySelector('.page-container').style = 'overflow: hidden; height: calc(100vh - 20px)'
      // 禁止右键菜单
      document.body.addEventListener('contextmenu', this.stopContextmenuInBody, true)
      document.body.style.overflowY = 'hidden'
    },
    deactivated() {
      // 删除所有弹窗
      $(".el-popover.el-popper").remove();
      // 开放滚动条
      document.querySelector('.page-container').style =
        'height: calc(100vh - 130px); min-height: 496px; overflow: "";'
      document.body.removeEventListener('contextmenu', this.stopContextmenuInBody, true)
      document.body.style.overflowY = ''
    },
    methods: {
      getRoomColor(item){
        // 无论什么状态，锁房则显示锁房颜色
        if(item.lockType === 0){
          return this.stateColors['ooo'].color;
        }
        //欠费则优先显示欠费颜色
        if(this.stateColors['ar'].checked 
        && item.lianpayment - item.lianconsumption < 0 
        && item.singleMain == 1 && item.isSingle == 1){
          return this.stateColors['ar'].color;
        }
        //入住类型为钟点房则优先显示钟点房颜色
        if(this.stateColors['ho'].checked 
        && item.sicheckinType == 1){
          return this.stateColors['ho'].color;
        }

        return this.stateColors[this.roomStates[item.type]].color;
      },
      handleSearch() {
        // 在这里处理搜索逻辑
        console.log('搜索内容:', this.dataForm.key);
      },
      setRightWidth(width){
        this.rightWidth = width;
        console.log('set right width:',this.rightWidth);
      },
      // scroll panel
      scollOrContentResize() {
        function buildSumWidth(nodeArr) {
          let currentWidth = 0;
          const widthArr = [];
          nodeArr.forEach((item) => {
            widthArr.push(currentWidth);
            currentWidth += currentWidth ? item.clientWidth + 7 : 17 + item.clientWidth;
          });
          return widthArr;
        }
        if (this.$refs.container) {
          const childrenNodeList = [];
          let nodes = this.$refs.container.children[0].children[0].children;
          for (let index = 0; index < nodes.length; index++) {
            childrenNodeList.push(nodes[index]);
          }
          this.leftArr = buildSumWidth(childrenNodeList);
          const { clientWidth, scrollWidth, scrollLeft } = this.$refs.container;
          this.showLeftIcon = scrollLeft > 1;
          this.showRightIcon = scrollLeft + clientWidth < scrollWidth - 1;
        }
      },
      scollByIcon(params) {
        const { scrollLeft, clientWidth } = this.$refs.container;
        let stepNum = scrollLeft + (clientWidth - 200);
        if (params === 'left') {
          stepNum = scrollLeft - (clientWidth - 200);
        }
        let index = this.leftArr.findIndex((i) => i > stepNum);
        index = index > -1 ? index - 1 : this.leftArr.length - 2;
        if (stepNum <= 0 || index < 0) {
          index = 0;
        }
        this.$refs.container.scrollTo(this.leftArr[index], 0);
      },
      savewaiter() {
        this.formwaiter.floorRoomId = this.item2.id;
        this.$http({
          url: this.$http.adornUrl(`/hotel/twaiterrecord/save`),
          method: "post",
          data: this.$http.adornData({
            waiterId: this.formwaiter.waiterId,
            floorRoomId: this.formwaiter.floorRoomId,
            creatUserId: this.formwaiter.creatUserId,
            ceeatTime: this.formwaiter.ceeatTime,
            remack: this.formwaiter.remack,
            sellerId: this.formwaiter.sellerId,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.showzzf = false;
            if (this.is == '0') {
              this.setClearAll(this.selectRoomsec, 'clean')
            } else {
              this.setClear("clean");
            }
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      gettwaiterlist() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/twaiter/list`),
          method: "get",
        }).then(({
          data
        }) => {
          this.twaiterlist = data.page.list;
        });
      },
      testBtn() {
        layer.open({
          type: 2,
          title: false,
          area: ["630px", "360px"],
          shade: 0.8,
          maxmin: true,
          shadeClose: true,
          content: "/#/popup-ruzhu",
        });
      },
      queryCardNumber(CardNumber) {
        console.log(CardNumber);
        this.$http({
          url: this.$http.adornUrl(`/hotel/tdoorlock/getCard/` + CardNumber),
          method: "post",
        }).then(({
          data
        }) => {
          this.forms = data.tDoorLock;
        });
      },
      readCard() {
        var doorLockParams = {
          RoomNumber: "1001",
          StartDate: "2020-03-01",
          EndDate: "2020-03-02",
          OpeartorType: "",
          CardID: "1",
        };
        var postData = {
          DeviceType: "DoorLockHareware",
          Params: JSON.stringify(doorLockParams),
        };
        this.Post(postData, "Read");
      },

      addPeopleBtn(item) {
        this.addPeopleVisible = true;
        this.$nextTick(() => {
          this.$refs.addPeople.init({
            sellerId: item.sellerId,
            floorRoomId: item.id,
            arrivalsTime: item.pearrivalsTime,
            predissociationTime: item.pepredissociationTime,
            roomPrice: item.peroomPrice,
            singleId: item.singleId,
            sign: item.pesign,
          });
        });
      },
      // 入账
      ruzhangHandle(item) {
        this.ruzhangVisible = true;
        this.$nextTick(() => {
          this.$refs.ruzhang.init({
            id: item.peid,
            singleId: item.singleId,
          });
        });
      },
      /* 取消入住*/
      cancellationBtn(item) {
        console.log("撤销入住按钮触发", item);
        /*
		id: item.peid,
		singleId: item.singleId,
		*/
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '是否撤销入住？')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              this.$http({
                url: this.$http.adornUrl(
                  `/hotel/thotelfloorroomcheckinsingle/cancellation`
                ),
                method: "get",
                params: this.$http.adornParams({
                  peopleId: item.peid,
                  singleId: item.singleId,
                }),
              }).then(({
                data
              }) => {
                if (data && data.code === 0) {
                  this.getDataList();
                  this.$message({
                    message: this.$t("Common.OperationSuccessful"),
                    type: "success",
                    duration: 1500,
                    onClose: () => {

                    },
                  });
                } else {
                  this.$message.error(data.msg);
                }
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                  instance.confirmButtonText = '确定';
                }, 300);
              });
            } else {
              done();
            }

            setTimeout(() => {
              instance.confirmButtonLoading = false;
              instance.confirmButtonText = '确定';
            }, 3000);
          }
        }).then(action => {

        });
      },
      xuzhuTiqian(item) {

        console.log(item);
        this.xuzhuTiqianVisible = true;
        this.$nextTick(() => {
          this.$refs.xuzhuTiqian.init({
            id: item.peid,
            predissociationTime: item.pepredissociationTime,
            arrivalsTime: item.pearrivalsTime,
            singleId: item.singleId,
            floorRoomId: item.id,
            roomId: item.roomId,
            roomSignNum: item.roomSignNum,
            pename: item.pename,
            indexlength: 0
          });
        });
      },
      jieZhangTuiFang(item) {
        this.closingRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.closingRoom.init({
            singleId: item.singleId,
            floorRoomId: item.id,
          });
        });
      },
      etixRoom(floorRoomId) {
        this.$confirm("您确认要退出联房吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/thotelfloorroomcheckinsingle/exit_single/${floorRoomId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t("Common.OperationSuccessful"),
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
      //换房
      changeRoom(item) {
        console.log("item", item)
        this.changeRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.changeRoom.init({ ...item,
            peopleId: item.peid
          });
        });
      },
      // 加入联房
      joinRoomBtn(singleId) {
        this.joinRoomVisible = true;
        this.$nextTick(() => {
          this.$refs.joinRoom.init(singleId);
        });
      },
      ruzhu(list) {
        //将数据存储到本地
        this.$cookie.set("ruzhuRoom", JSON.stringify(list));
        this.checkinDialogVisible = true;
        this.$nextTick(() => {
          this.$refs.checkin.init(list);
        });
      },
      reserve(list) {
        //将数据存储到本地
        this.$cookie.set("reserveRoom", JSON.stringify(list));
        this.$router.push({
          name: "reserve",
        });
      },
      toAccounting(item, type) {
        //将数据存储到本地
        var p = {
          singleId: item.singleId,
          type: type,
        };
        this.$cookie.set("accounting", JSON.stringify(p));
        this.$router.push({
          name: "accounting",
        });
      },
      toAccounting2(item, type) {
        //将数据存储到本地
        var p = {
          singleId: item.reserSingleId,
          type: type,
        };
        this.$cookie.set("accounting", JSON.stringify(p));
        this.$router.push({
          name: "accounting",
        });
      },
      viewLog(item) {
        this.floorroomlogVisible = true;
        this.$nextTick(() => {
          this.$refs.floorroomlog.init(item);
        });
      },
      weixiuBtn2(list) {
        if (this.setMaintainName == "置维修") {
          var idArr = [];
          list.forEach((item) => {
            idArr.push(item.id);
          });
          this.fangtaiWeixiuVisible = true;
          this.$nextTick(() => {
            this.$refs.fangtaiWeixiu.init({
              id: idArr.join(","),
            });
          });
        } else {
          this.dataFormSubmitkz(list);
        }
      },

      dataFormSubmitkz(list) {
        var idArr = [];
        list.forEach((item) => {
          idArr.push(item.id);
        });
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/updatetype`),
          method: "post",
          data: this.$http.adornData({
            ids: idArr.join(","),
            type: 1,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.setMaintainName = "置维修";
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      weixiuBtn(item) {
        this.fangtaiWeixiuVisible = true;
        this.$nextTick(() => {
          this.$refs.fangtaiWeixiu.init(item);
        });
      },
      checkNighTrialBtn() {
        if (moment(this.nightTrialSellerEntity.lastNightTrialTime).diff(moment(), 'days') == 0) {
          this.$alert('今日已夜审', '提示', {
            confirmButtonText: '确定',
            callback: action => {

            }
          });
        } else {
          this.$confirm(
              // `开启手动夜审,夜审时间${moment().add(1,'days').format('YYYY-MM-DD')} ${this.nightTrialSellerEntity.setNightTrialTime}是否继续?`,
              `开启手动夜审,立即夜审是否继续?`,
              "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
            .then(() => {
              this.$http({
                url: this.$http.adornUrl(`/hotel/thotelnighttrial/checkNighTrialBtn`),
                method: "post",
                data: this.$http.adornData({
                  id: this.nightTrialSellerEntity.id,
                  lastNightState: 1,
                }),
              }).then(({
                data
              }) => {
                this.setLoading = false;
                if (data && data.code === 0) {
                  this.nightTrialSellerEntity.lastNightState = 1;
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            })
            .catch(() => {});
        }

      },
      //锁房
      open() {
        var item = this.item2;
        this.$prompt("锁房原因", "锁房", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            inputErrorMessage: "原因不能为空",
          })
          .then(({
            value
          }) => {
            //发送请求
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
              method: "post",
              data: this.$http.adornData({
                ids: item.id,
                lockType: 0,
                type: item.type,
                desc: value,
              }),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                  },
                });
                this.getDataList();
              } else {
                this.$message.error(data.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      },
      open2(list) {
        var idArr = [];
        list.forEach((item) => {
          idArr.push(item.id);
        });
        var item = this.item2;
        this.$prompt("锁房原因", "锁房", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            inputErrorMessage: "原因不能为空",
          })
          .then(({
            value
          }) => {
            //发送请求
            this.$http({
              url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
              method: "post",
              data: this.$http.adornData({
                ids: idArr.join(","),
                lockType: 0,
                // type: item.type,
                desc: value,
              }),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                  },
                });
                this.getDataList();
              } else {
                this.$message.error(data.msg);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      },
      closeSelect(item) {
        item.checked = false;
        if (this.dataList.filter((item) => item.checked).length == 0) {
          this.alertShow = false;
        }
        var list = this.dataList.filter((item) => item.checked);
        this.selectRoom = list;
        this.zwxroom = list.length;
        this.selectSign.dirty = false;
        this.selectSign.jing = false;
        this.selectSign.lock = false;
        this.selectSign.weixiu = false;
        this.selectSign.ruzhu = false;
        this.selectSign.yuding = false;
        this.selectSign.lianfang = false;
        console.log(this.selectRoom);
        if (this.selectRoom.length == 2) {
          this.alertShow = true;
        }
        this.selectRoom.forEach((item) => {
          //标记有脏房
          if (item.type == 1 || item.type == 3) {
            this.selectSign.dirty = true;
          }
          //标记有干净房
          if (item.type == 0 || item.type == 1) {
            this.selectSign.jing = true;
          }
          //标记有锁房
          if (item.lockType == 0) {
            this.selectSign.lock = true;
          }
          //标记维修房
          if (item.type == 4) {
            this.selectSign.weixiu = true;
          }
          //标记有入住
          if (item.isSingle == 1) {
            this.selectSign.ruzhu = true;
          }
          //标记有预定
          if (item.isSingle == 4) {
            this.selectSign.yuding = true;
          }
          //标记有联房
          if (item.singleNo != 0) {
            this.selectSign.lianfang = true;
          }
        });
      },
      clearSelectAll() {
        this.dataList.forEach((item) => {
          item.checked = false;
        });
        this.selectRoom = [];
        this.selectSign.dirty = false;
        this.selectSign.jing = false;
        this.selectSign.lock = false;
        this.selectSign.weixiu = false;
        this.selectSign.ruzhu = false;
        this.selectSign.yuding = false;
        this.selectSign.lianfang = false;
        this.alertShow = false;
      },
      unlock() {
        var item = this.item2;
        //发送请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
          method: "post",
          data: this.$http.adornData({
            id: item.id,
            type: item.type,
            lockType: 1,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
              },
            });
            item.lockType = 1;
            item.checked = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      setClearAll(list, sign) {
        var idArr = [];
        var typeArr = [];
        list.forEach((item) => {
          idArr.push(item.id);
          if (sign == "dirty") {
            //空房置脏
            if (item.type == 0) {
              item.type = 1;
            }
            //住房置脏
            if (item.type == 2) {
              item.type = 3;
            }
          }
          if (sign == "clean") {
            //空房置脏
            if (item.type == 1) {
              item.type = 0;
            }
            //住房置脏
            if (item.type == 3) {
              item.type = 2;
            }
          }
          if (sign == "weixiu") {
            item.type = 1;
          }
          typeArr.push(item.type);
        });

        //发送请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/setType2`),
          method: "post",
          data: this.$http.adornData({
            ids: idArr.join(","),
            types: typeArr.join(","),
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            if (sign == "dirty") {
              this.selectSign.jing = true;
              this.selectSign.dirty = false;
            }
            if (sign == "clean") {
              this.selectSign.jing = false;
              this.selectSign.dirty = true;
            }
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                // this.getDataList();
              },
            });
          } else {
            this.$message.error(data.msg);
          }
        });

        //去除房间所有选中状态
        this.clearSelectAll();
      },
      setClear(sign) {
        //0-空净，1-空脏，2-住净，3-住脏，4-维修，5-锁房
        var item = this.item2;
        if (sign == "dirty") {
          //空房置脏
          if (item.type == 0) {
            item.type = 1;
          }
          //住房置脏
          if (item.type == 2) {
            item.type = 3;
          }
        }
        if (sign == "clean") {
          //空房置净
          if (item.type == 1) {
            item.type = 0;
          }
          //住房置净
          if (item.type == 3) {
            item.type = 2;
          }
        }
        if (sign == "weixiu") {
          item.type = 1;
        }
        //发送请求
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroom/state`),
          method: "post",
          data: this.$http.adornData({
            id: item.id,
            type: item.type,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            if (sign == "dirty") {
              this.selectSign.jing = true;
              this.selectSign.dirty = false;
            }
            if (sign == "clean") {
              this.selectSign.jing = false;
              this.selectSign.dirty = true;
            }
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.visible = false;
                // getDataList()
              },
            });
            item.checked = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      handleClose(e) {
        this.contextmenuDivVisible = false;
      },
      contextmenuClick(e, item) {
        let position = e.target.getBoundingClientRect()
        let left = e.pageX - 125;
        let top = e.pageY - 110;

        $(".el-popover.el-popper").remove();
        this.item2 = item;
        this.contextmenuDivVisible = true;
        this.dataList.forEach((item) => {
          item.checked = false;
        });
        // console.log(e.pageX);
        // console.log(e.pageY);
        item.checked = !item.checked;
        this.$nextTick(() => {
          // $(".contextmenu_div").css({
          //   position: "absolute",
          //   left: e.pageX - 150 + "px",
          //   top: e.pageY - 100 + "px",
          // });
          // console.log(top, $('.page-container').height(), $('.contextmenu_div').height() );
          let distence = $('.page-container').height() - $('.contextmenu_div').height() - top
          if (distence < 50) {
            top += distence - 50
          }
          $(".contextmenu_div").css({
            position: "absolute",
            left: left + "px",
            top: top + "px",
          });
        });
        var list = this.dataList.filter((item) => item.checked);
        this.selectRoom = list;
        this.zwxroom = list.length;
        this.selectSign.dirty = false;
        this.selectSign.jing = false;
        this.selectSign.lock = false;
        this.selectSign.weixiu = false;
        this.selectSign.ruzhu = false;
        this.selectSign.yuding = false;
        // console.log(this.selectRoom);
        this.selectRoom.forEach((item) => {
          //标记有脏房
          if (item.type == 1 || item.type == 3) {
            this.selectSign.dirty = true;
          }
          //标记有干净房
          if (item.type == 0 || item.type == 1) {
            this.selectSign.jing = true;
          }
          //标记有锁房
          if (item.lockType == 0) {
            this.selectSign.lock = true;
          }
          //标记维修房
          if (item.type == 4) {
            this.selectSign.weixiu = true;
          }
          //标记有入住
          if (item.isSingle == 1) {
            this.selectSign.ruzhu = true;
          }
          //标记有预定
          if (item.isSingle == 4) {
            this.selectSign.yuding = true;
          }
        });
      },
      refresh() {
        this.getDataList();
      },
      selRoomFloorBtn() {
        this.alertShow = !this.alertShow;
      },
      queryRoomStateSetting() {
        this.$http({
          url: this.$http.adornUrl(`/room/setting/update`),
          method: "post",
          data: this.$http.adornData({
            ...this.setting,
            color: JSON.stringify(this.color),
            stateColors: JSON.stringify(this.stateColors),
            stateTextColors: JSON.stringify(this.stateTextColors),
            fontSizes: JSON.stringify(this.fontSizes),
            shownContent: JSON.stringify(this.shownContent),
            shownIcons: JSON.stringify(this.shownIcons)
          }),
        }).then(({
            data
          }) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
                this.settingDialogVisible = false;
              },
            });
          });
      },
      saveRoomStateSetting() {
        this.$http({
          url: this.$http.adornUrl(`/room/setting/update`),
          method: "post",
          data: this.$http.adornData({
            ...this.setting,
            color: JSON.stringify(this.color),
            stateColors: JSON.stringify(this.stateColors),
            stateTextColors: JSON.stringify(this.stateTextColors),
            fontSizes: JSON.stringify(this.fontSizes),
            shownContent: JSON.stringify(this.shownContent),
            shownIcons: JSON.stringify(this.shownIcons)
          }),
        }).then(({
            data
          }) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
                this.settingDialogVisible = false;
              },
            });
          });
      },
      resetRoomStateSetting() {
        this.$confirm(
          `将重置当前的房态显示设置，是否继续?`,
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/room/setting/reset`),
            method: "post",
            data: {},
          }).then(({
            data
          }) => {
            this.setting = data;
            this.stateColors = data.stateColorsObj;
            this.stateTextColors = data.stateTextColorsObj;
            this.fontSizes = data.fontSizesObj;
            this.shownContent = data.shownContentObj;
            this.shownIcons = data.shownIconsObj;
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
                this.settingDialogVisible = false;
              },
            });
          });
        })
      },
      openSettingDialog() {
        this.settingDialogVisible = true;
      },
      onBuildingChange(val) {
        this.dataForm.floorId = undefined
        if(!val){
          this.floors = []
          return
        }
        this.getFloorList(val)
        this.getDataList();
      },
      onFloorChange(val) {
        this.data = []
        this.getDataList();
      },
      sellianchange(val) {
        console.log(val);
        this.getDataList();
      },
      cellDblclick(item) {
        $(".el-popover.el-popper").hide();
        console.log(item);
        this.clickCell(item);
        item.checked = true;
        if (item.lockType != 0 && item.type != 4) {
          if (item.isSingle == 1) {
            this.toAccounting(item, '1');
          } else {
            if (item.reserState == 1) {
              var today = moment().format('YYYY-MM-DD')

              var reserStartTime = moment(item.reserStartTime).format('YYYY-MM-DD')

              if (today == reserStartTime) {
                this.inquiryReserInit(item);
              } else {
                this.ruzhu([item]);
              }
            } else {
              this.ruzhu([item]);
            }


          }
        }

      },
      inquiryReserInit(item) {
        this.$confirm('此房间有预定是否预定转入住？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          closeOnClickModal: false,
          closeOnPressEscape: false,
          distinguishCancelAndClose: true,
          type: 'warning'
        }).then(() => {
          console.log("item", item)
          this.toAccounting2(item, '1');
        }).catch(() => {
          this.ruzhu([item]);
        });
      },

      //查询夜审信息
      nightTrialSeller() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelnighttrial/seller`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.nightTrialSellerEntity = data.nightTrialEntity;
          }
        });
      },
      clickCell(item) {
        $(".el-popover.el-popper").hide();
        if (!this.selType) {
          this.dataList.forEach((item) => {
            item.checked = false;
          });
        }
        item.checked = !item.checked;
        var list = this.dataList.filter((item) => item.checked);
        this.selectRoom = list;
        this.zwxroom = list.length;
        this.selectSign.dirty = false;
        this.selectSign.jing = false;
        this.selectSign.lock = false;
        this.selectSign.weixiu = false;
        this.selectSign.ruzhu = false;
        this.selectSign.yuding = false;
        this.selectSign.lianfang = false;
        if (this.selectRoom.length == 2) {
          this.alertShow = true;
        }
        var i = 0;
        this.selectRoom.forEach((item) => {
          //标记有脏房
          if (item.type == 1 || item.type == 3) {
            this.selectSign.dirty = true;
          }
          //标记有干净房
          if (item.type == 0 || item.type == 2) {
            this.selectSign.jing = true;
          }
          //标记有锁房
          if (item.lockType == 0) {
            this.selectSign.lock = true;
          }
          //标记维修房
          if (item.type == 4) {
            i = i + 1;
            this.selectSign.weixiu = true;
          }
          //标记有入住
          if (item.isSingle == 1) {
            this.selectSign.ruzhu = true;
          }
          //标记有预定
          if (item.isSingle == 4) {
            this.selectSign.yuding = true;
          }
          //标记有联房
          if (item.singleNo != 0) {
            this.selectSign.lianfang = true;
          }
        });
        if (this.selectRoom.length == 0) {
          this.alertShow = false;
        }
        if (i == this.selectRoom.length && i != 0) {
          this.selectSign.weixiu = false;
          this.zwxroom = 0;
          this.selectSign.lock = true;
          this.selectSign.jing = true;
          this.selectSign.dirty = true;
          this.setMaintainName = "完成维修";
        } else {
          this.setMaintainName = "置维修";
        }
        console.log(this.selectSign.ruzhu);
      },
      selectQueryOption(item, index, sign) {
        if (sign == "type") {
          item.checked = !item.checked;
        }
        if (sign == "room") {
          item.checked = !item.checked;
        }
        if (sign == "tenantSourceType") {
          item.checked = !item.checked;
        }
        if (sign == "checkinType") {
          item.checked = !item.checked;
        }
        if (sign == "state") {
          item.checked = !item.checked;
        }
        if (sign == "guestService") {
          item.checked = !item.checked;
        }
        console.log('types:--',this.roomTypes);

        this.getDataList();
      },
      originalParem(isScroll = false){
        //房间状态类型
        var types = "";
        this.roomTypes.forEach((item, index) => {
          if (item.checked) {
            types += index + ",";
          }
        });
        types = types.substring(0, types.length - 1);
        //房型类型
        var roomIds = "";
        this.roomTypeList.forEach((item, index) => {
          if (item.checked) {
            roomIds += item.roomId + ",";
          }
        });
        roomIds = roomIds.substring(0, roomIds.length - 1);
        var tenantSourceTypeIds = "";//客源类型
        var tenantTypeIds = ""; //客人类型
        this.tenantSourceTypeList.forEach((item, index) => {
          if (item.checked) {
            tenantSourceTypeIds += item.val + ",";
          }
        });
        this.selectedTenantTypes.forEach((item, index) => {
          if (item) {
            tenantTypeIds += item + ",";
          }
        });
        tenantSourceTypeIds = tenantSourceTypeIds.substring(0, tenantSourceTypeIds.length - 1);
        //入住类型
        var checkinTypes = "";
        this.checkinTypeList.forEach((item, index) => {
          if (item.checked) {
            checkinTypes += item.val + ",";
          }
        });
        checkinTypes = checkinTypes.substring(0, checkinTypes.length - 1);
        //房间状态
        var states = "";
        this.stateList.forEach((item, index) => {
          if (item.checked) {
            states += item.val + ",";
          }
        });
        states = states.substring(0, states.length - 1);
        //对客服务
        var guestServices = "";
        this.guestServiceList.forEach((item, index) => {
          if (item.checked) {
            guestServices += item.val + ",";
          }
        });
        guestServices = guestServices.substring(0, guestServices.length - 1);
        // 筛选时,重新加载
        if ((types || roomIds
        || tenantSourceTypeIds || tenantTypeIds 
        || checkinTypes || states || guestServices 
        || this.dataForm.floorIds) && !
          isScroll) {
          this.limit = 100
          this.page = 1
        }
        if (isScroll) {
          this.limit = 100
          this.page++
        } else {
          this.page = 1
        }

        if (this.page === 1) { // 分页为 1 时，清空数组
          this.lazyDataList = []
        }
        const params = {
          key: this.dataForm.key,
          singleNo: this.dataForm.singleNo,
          page: this.page,
          limit: this.limit,
          types: types,
          rooms: roomIds,
          tenantSourceTypeIds: tenantSourceTypeIds,
          tenantTypeIds: tenantTypeIds,
          checkinTypes: checkinTypes,
          states: states,
          guestServices: guestServices,
          parentId: this.dataForm.parentId,
          floorId: this.dataForm.floorId,
          floors: this.dataForm.floorIds,

          endFloorId: this.dataList.length > 0 ? this.dataList[this.dataList.length - 1].floorId : 0
        }
        this.queryCondition = params
      },
      // 获取房态数据列表
      // isScroll 是否滚轮触发的加载
      getDataList(isScroll = false) {
        this.roomLoading = true;
        this.originalParem(isScroll);
        this.$http({
          url: this.$http.adornUrl("/hotel/thotelfloorroom/roomState"),
          method: "get",
          params: this.$http.adornParams({
            key: this.queryCondition.key,
            singleNo: this.queryCondition.singleNo,
            page: this.queryCondition.page,
            limit: this.queryCondition.limit,
            types: this.queryCondition.types,
            rooms: this.queryCondition.rooms,
            tenantTypeIds: this.queryCondition.tenantTypeIds,
            tenantSourceTypeIds: this.queryCondition.tenantSourceTypeIds,
            states: this.queryCondition.states,
            guestServices: this.queryCondition.guestServices,
            parentId: this.queryCondition.parentId,
            floorId: this.queryCondition.floorId,
            floors: this.queryCondition.floorIds,
            endFloorId: this.queryCondition.endFloorId
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.totalCount = data.data.totalCount
            this.lazyDataList = data.data.data.map((item) => ({
              ...item,
              pepredissociationTime: item.pepredissociationTime + "",
              checked: false,
            }));
            if (isScroll) {
              this.dataList.push(...this.lazyDataList)
              this.$nextTick(() => {
                this.roomLoading = false;
              });
            } else {
              this.dataList = this.lazyDataList
              this.$nextTick(() => {
                this.roomLoading = false;
              });
            }
            var timer = setInterval(this.refreshQuery, 60000)
            this.$forceUpdate();
          } else {
            this.$message.error(data.msg);
            this.dataList = [];
          }
        });
      },
      selectFloorRoom() {
        this.page = 1
        this.getDataList()
      },

      refreshQuery() {
        for (var i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].sicheckinType == 1) {
            if (this.dataList[i].m == '59') {
              this.dataList[i].m = '00';
              var h = '';
              if (this.dataList[i].h.substring(0, 1) == '0') {
                this.dataList[i].h = this.dataList[i].h.substring(1, 2);
              }
              if (parseInt(this.dataList[i].h) + 1 < 10) {
                h = '0' + (parseInt(this.dataList[i].h) + 1);
              } else {
                h = parseInt(this.dataList[i].h) + 1 + '';
              }
              this.dataList[i].h = h;
            } else {
              var m = '';
              if (this.dataList[i].m.substring(0, 1) == '0') {
                this.dataList[i].m = this.dataList[i].m.substring(1, 2);
              }
              if (parseInt(this.dataList[i].m) + 1 < 10) {
                m = '0' + (parseInt(this.dataList[i].m) + 1);
              } else {
                m = parseInt(this.dataList[i].m) + 1 + '';
              }
              this.dataList[i].m = m;
            }
          }
        }
      },
      creartform() {
        this.formwaiter = {
          waiterId: "",
          floorRoomId: "",
          creatUserId: "",
          ceeatTime: "",
          remack: "",
          sellerId: "",
        };
      },
      showzzhuf(item2, is) {
        this.creartform();
        if (is == '0') {
          this.selectRoomsec = item2;
        } else {
          this.item2 = item2;
        }
        this.is = is;
        this.$http({
          url: this.$http.adornUrl(`/hotel/tsellerclear/one`),
          method: "post",
          data: this.$http.adornParams({}),
        }).then(({
          data
        }) => {
          if (data.page == 0) {
            if (this.is == '0') {
              this.setClearAll(this.selectRoomsec, 'clean')
            } else {
              this.setClear("clean");
            }
          } else {
            this.showzzf = true;
          }
        });



      },

      //制卡
      DoorNewCard(item2) {
        this.doorLockParams.OpeartorType = "NewCard";
        this.getkk(item2);
      },
      //注销卡
      DoorCancelCard(item) {
        this.doorLockParams.OpeartorType = "CancelCard";
        this.getkk(item);
      },
      getkk(item2) {
        var result;
        this.$http({
          url: this.$http.adornUrl(`/hotel/business/Write`),
          method: "post",
          data: this.$http.adornParams({
            id: item2.id,
            singleId: item2.singleId
          }),
        }).then(({
          data
        }) => {
          this.doorLockParams.RoomNumber = data.roomNumber;
          this.doorLockParams.StartDate = data.StartDate;
          this.doorLockParams.EndDate = data.endDate;
          this.doorLockParams.CardID = data.CardID;
          this.doorLockParams.skr = data.skr;
          this.doorLockParams.sfz = data.sfz;
          this.doorLockParams.floorCengId = data.floorCengId;
          this.doorLockParams.floorId = data.floorId;
          this.doorLockParams.CardNum = data.CardNum;
          this.doorWriteCard(this.doorLockParams);
        });
      },

      Post(postData, methods) {
        var result;
        this.istrues = 0;
        this.axios({
          url: this.axios.postUrl(`/api/Service/` + methods),
          method: "POST",
          data: postData,
          cache: false,
          async: false,
          contentType: "application/json",
        }).then(({
          data
        }) => {
          if (data.isSuccess == true) {
            this.istrues = 1;
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            if (methods == "Read") {
              this.queryCardNumber(data.RoomNumber);
            } else {
              this.savedataForm();
            }
          } else {
            this.istrues = 1;
            this.$message({
              message: data.message,
              type: "error",
              duration: 1500,
            });
          }
        });
      },
      isputile(istrues, that) {
        setTimeout(function() {
          if (istrues == 0) {
            that.$message({
              message: "接口程序未打开，请打开接口程序",
              type: "error",
              duration: 1500,
            });
          }
        }, 2000);
      },
      savedataForm() {
        this.dataFormsa.skTime = this.doorLockParams.StartDate;
        this.dataFormsa.zkUser = this.doorLockParams.skr;
        this.dataFormsa.roomNum = this.doorLockParams.CardNum;
        this.dataFormsa.kaNo = this.doorLockParams.RoomNumber;
        this.dataFormsa.endTime = this.doorLockParams.EndDate;
        this.dataFormsa.creatTime = this.doorLockParams.StartDate;
        this.dataFormsa.floorCengId = this.doorLockParams.floorCengId;
        this.dataFormsa.floorId = this.doorLockParams.floorId;

        if (this.doorLockParams.OpeartorType == "NewCard") {
          this.dataFormsa.operation = "制新卡";
        } else if (this.doorLockParams.OpeartorType == "CopyCard") {
          this.dataFormsa.operation = "复制卡";
        } else {
          this.dataFormsa.operation = "注销卡";
        }
        this.$http({
          url: this.$http.adornUrl(`/hotel/tgatecard/save`),
          method: "post",
          data: this.$http.adornData({
            skTime: this.dataFormsa.skTime,
            zkUser: this.dataFormsa.zkUser,
            roomNum: this.dataFormsa.roomNum,
            kaNo: this.dataFormsa.kaNo,
            creatUserId: "",
            endTime: this.dataFormsa.endTime,
            ckSfz: this.dataFormsa.ckSfz,
            operation: this.dataFormsa.operation,
            creatTime: this.dataFormsa.creatTime,
            floorCengId: this.dataFormsa.floorCengId,
            floorId: this.dataFormsa.floorId,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {} else {
            this.$message.error(data.msg);
          }
        });
      },
      doorWriteCard(doorLockParams) {
        var postData = {
          DeviceType: "DoorLockHareware",
          Params: JSON.stringify(doorLockParams),
        };
        this.Post(postData, "Write");
      },
      // 获取房间类型用于查询房态信息
      getRoomType() {
        this.$http({
          url: this.$http.adornUrl("/hotel/thotelfloorroom/roomStateOptions"),
          method: "get",
          params: this.$http.adornParams({
            key: this.dataForm.key,
            floors: this.dataForm.floorIds,
          }),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.color = data.data.color;
            if(Object.keys(data.data.stateColors).length > 0){
              this.stateColors = data.data.stateColors;
            }
            if(Object.keys(data.data.stateTextColors).length > 0){
              this.stateTextColors = data.data.stateTextColors;
            }
            if(Object.keys(data.data.fontSizes).length > 0){
              this.fontSizes = data.data.fontSizes;
            }
            if(Object.keys(data.data.shownContent).length > 0){
              this.shownContent = data.data.shownContent;
            }
            if(Object.keys(data.data.shownIcons).length > 0){
              this.shownIcons = data.data.shownIcons;
            }
            
            this.typeMap = data.data.typeMap;
            if (this.roomTypeList.length == 0) {
              this.roomTypeList = data.data.roomTypeList.map((item) => ({
                ...item,
                checked: false,
              }));
              //顶部房型滚动筛选栏
              this.$nextTick(() => {
                this.scollOrContentResize()
              });
            }
            this.twinRoomOptions = data.data.twinRooms;
            this.tenantTypeList[0].count = data.data.skcount;
            this.tenantTypeList[1].count = data.data.vipcount;
            this.tenantTypeList[2].count = data.data.gscount;
            this.checkinTypeList[0].count = data.data.qtcount;
            this.checkinTypeList[1].count = data.data.szcount;
            this.checkinTypeList[2].count = data.data.cbcount;
            this.checkinTypeList[3].count = data.data.zycount;
            this.checkinTypeList[4].count = data.data.mfcount;
            this.checkinTypeList[5].count = data.data.tdcount;
            this.stateList[0].count = data.data.arrearsCount;//欠费数量
            // this.stateList[1].count = data.data.yjcount;
            this.stateList[1].count = data.data.continueCount;//续住数量
            this.stateList[2].count = data.data.hfcount;
            this.stateList[3].count = data.data.gstatus;
            // this.guestServiceList[0].count = data.data.srcount;
            this.floorOptions = data.data.floorList;
            this.typeMapCount = data.data.typeMapCount;
            this.setting = data.data.setting;
            this.roomCount = 0;
            data.data.roomTypeList.forEach((item) => {
              this.roomCount += item.count;
            });
          } else {
            this.dataList = [];
          }
        });
      },
      // 查询楼栋楼层列表
      getFloorList(pid) {
        this.$http({
          url: this.$http.adornUrl("/hotel/thotelfloor/list"),
          method: "get",
          params: this.$http.adornParams({
            pid: pid
          }),
        }).then(({
          data
        }) => {
          if(pid === 0 ){
            this.buildings = data
          }else{
            this.floors = data
          }
        });
      },
      // handlerPopoverHide 处理隐藏弹窗
      handlerPopoverHide(index) {
        // console.log(this)
        $(".el-popover.el-popper").hide();
      },
      // 阻止右键弹窗
      handlerRightContextmenu(event) {
        return false
      },
      // 处理屏幕超高的情况 懒加载无法触发
      handlerHeightMore() {
        this.$nextTick(() => {
          let ftBox = this.$refs.fangtaiBox.$el
          let h = Math.floor(ftBox.clientHeight / 10)
          let sh = Math.floor(ftBox.scrollHeight / 10)
          let st = ftBox.scrollTop
          if (h == sh && st == 0) {
            this.getDataList(true)
            console.log(h, sh, st, (h === sh && st === 0), '屏幕超高');
          }
        })
      },
      // 滚动加载房间
      onRoomStateWindowScroll(event) {
        let scrollTop = event.target.scrollTop;
        // 向上滚动不执行
        if (scrollTop - this.lastScrollTop < 0) {
          return this.lastScrollTop = scrollTop
        } else {
          this.lastScrollTop = scrollTop
        }
        let scrollHeight = event.target.scrollHeight
        let boxHeight = event.target.clientHeight
        let distence = scrollHeight - scrollTop - boxHeight
        if (distence < 50 && !this.roomLoading && this.dataList.length < this.totalCount) {
          this.getDataList(true)
        }
      },
      // 在body中 阻止右键菜单
      stopContextmenuInBody(event) {
        event && event.preventDefault()
      },
      //WebSocket sellerSign 商家标识
      webSocketInit(sellerSign) {
        if (typeof WebSocket === "undefined") {
          alert("您的浏览器不支持socket");
        } else {
          let domain =
            window.SITE_CONFIG["baseUrl"].indexOf("https") > 0 ?
            window.SITE_CONFIG["baseUrl"].replace(/https/g, "wss") :
            window.SITE_CONFIG["baseUrl"].replace(/http/g, "ws");

          // 实例化socket
          this.floorRoomSocket = new WebSocket(`${domain}/websocket/${sellerSign}`);
          // 监听socket连接
          this.floorRoomSocket.onopen = this.webSocketOpen;
          // 监听socket错误信息
          this.floorRoomSocket.onerror = this.webSocketError;
          // 监听socket消息
          this.floorRoomSocket.onmessage = this.webSocketGetMessage;
          // 监听socket关闭
          this.floorRoomSocket.onclose = this.close;

          console.log(this.floorRoomSocket)
        }
      },
      // 获取socket标识
      getWebSocketInfo() {
        this.$http({
          url: this.$http.adornUrl("/hotel/thotelfloorroom/webSocket/info"),
          method: "get",
          params: this.$http.adornParams()
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.webSocketInit(data.webSocketSign);
          }
        });
      },
      webSocketOpen: function() {
        console.log("房态socket连接成功");
      },
      webSocketError: function() {
        console.log("连接错误");
      },
      webSocketGetMessage: function(msg) {
        console.log("socket", msg)
        this.getDataList()
        this.getRoomType()
      },
      send: function() {
        this.floorRoomSocket.send(this.params);
      },
      close: function() {
        console.log("socket已经关闭");
      },
      test(event) {
        console.log(event, 'contentmenu');
      }
    },
    mounted() {
      // 初始化事件监听
      this.$refs.fangtaiBox.$el.addEventListener('scroll', this.onRoomStateWindowScroll)
      // console.log('rooms-box 监听以添加');
      this.getWebSocketInfo()
      // 房态说明悬浮按钮
      this.$nextTick(() => {
        // 获取DOM元素
        let dragDiv = this.$refs.dragDiv;
        // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
        let clientOffset = {};
        // 绑定鼠标按下事件
        dragDiv.addEventListener("mousedown", (event) => {
          let offsetX = dragDiv.getBoundingClientRect().left; // 获取当前的x轴距离
          let offsetY = dragDiv.getBoundingClientRect().top; // 获取当前的y轴距离
          let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
          let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
          // 缓存 clientX clientY
          clientOffset.clientX = event.clientX;
          clientOffset.clientY = event.clientY;
          // 鼠标移动的时候不停的修改div的left和top值
          document.onmousemove = function(event) {
            dragDiv.style.left = event.clientX - innerX + "px";
            dragDiv.style.top = event.clientY - innerY + "px";
            // dragDiv 距离顶部的距离
            let dragDivTop = window.innerHeight - dragDiv.getBoundingClientRect().height;
            // dragDiv 距离左部的距离
            let dragDivLeft = window.innerWidth - dragDiv.getBoundingClientRect().width;
            // 边界判断处理
            // 1、设置左右不能动
            // dragDiv.style.left = dragDivLeft + "px";
            //改为左侧悬浮
            dragDiv.style.left =  "0px";
            // 2、超出顶部处理
            if (dragDiv.getBoundingClientRect().top <= 0) {
              dragDiv.style.top = "0px";
            }
            // 3、超出底部处理
            if (dragDiv.getBoundingClientRect().top >= dragDivTop) {
              dragDiv.style.top = dragDivTop + "px";
            }
          };
          // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        }, false);
        // 绑定鼠标松开事件
        dragDiv.addEventListener('mouseup', (event) => {
          let clientX = event.clientX;
          let clientY = event.clientY;
          if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
            console.log('click 事件');
            this.showRoomStateDesc = !this.showRoomStateDesc;
          } else {
            console.log('drag 事件');
          }
        })
      });
    },
    destroyed() {
      this.close()
    }
  };
</script>

<style lang="scss">
  .el-form-item{
    margin-bottom: 6px;
  }
  .search-box .el-input--medium .el-input__inner{
    border-radius: 20px;
  }
  .el-divider{
    background-color: #ccc;
  }
  .custom-label-position .el-form-item__label {
    float: right;
  }

  .custom-checkbox{
    vertical-align: top;
    font-size: 16px;
  }

  .setting-dialog .el-color-picker{
    width: 50px;
  }
  .setting-dialog .el-color-picker .el-color-picker__trigger{
    width: 50px;
  }
  .setting-dialog .el-color-picker .el-color-picker__icon{
    display: none;
  }
  .setting-dialog .el-radio-button--small .el-radio-button__inner{
    padding: 9px 44px;
  }
  .setting-dialog .el-input-number--medium{
    width:110px;
  }


  .room-box-max {
    font-size: 16px;
    color: #fff;
    width : 210px;
    height : 160px;
    margin-left: 15px;
    float: left;
    position: relative;
    margin-bottom: 15px;
    box-sizing: border-box;

    .guest_name span.ellipsis {
      max-width: 93px;
    }
    .room-num{
      font-size:20px;
    }
  }

  .room-box-big-small,
  .room-box-small {
    color: #fff;
    height: 90px;
    margin-left: 10px;
    float: left;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
    cursor: pointer;
  }

  .room-box-small {
    font-size: 12px;
    width: 105px;
  }

  .room-box-big-middle {
    font-size: 15px;
    width: 135px;

    .guest_name span.ellipsis {
      max-width: 80px;
    }
  }

  .room-box-big-middle,
  .room-box-middle {
    color: #fff;
    height: 100px;
    margin-left: 10px;
    float: left;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .room-box-big-middle,
  .room-box-middle {
    color: #fff;
    height: 100px;
    margin-left: 10px;
    float: left;
    position: relative;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .room-box-middle {
    font-size: 14px;
    width: 125px;

    .guest_name .ellipsis {
      max-width: 60px;
    }
  }

  .room-box-big-small {
    font-size: 12px;
    width: 115px;
  }

  .room-box-content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
  }

  .room-box-content {
    padding: 5px;
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
  }

  .card{
    border-radius : 5px;
    box-shadow : rgba(0, 0, 0, 0.5) 0px 2px 2px 0px;
  }

  .room-box-content .f_col {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
  }

  .floor-num {
    font-weight: bold;
    font-size : 16px;
    color : rgb(0, 186, 173);
    letter-spacing: 1px;
  }
  .floor-desc{
    letter-spacing: 1px;
    font-size : 13px;
    color : rgb(128, 128, 128);
  }

  .room-num{
    font-size: 18px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
  }

  .room-type {
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 14px;
    font-size: 14px;
  }
  .room-price {
    padding: 5px;
    font-size: 18px;
  }

  .guest_name {
    white-space: nowrap;

    span.ellipsis {
      display: inline-block;
      vertical-align: top;
      max-width: 48px;
    }
  }

  .icon_group {
    width: 100%;
    box-sizing: border-box;
    padding: 0 5px;
    position: absolute;
    left: 0;
    bottom: 5px;
    white-space: nowrap;
  }

  .left_group {
    float: left;
    font-size: 12px;
  }

  .icon_circle {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    text-align: center;
    line-height: 16px;
    background-color: white;
    color: #fff;
    font-size: 12px;
    font-style: inherit;
  }
  .type-icon-primary{
    font-size : 12px;
    color : rgb(0, 186, 173);
    background-color: white;
  }

  .left_group>.icon_circle:last-of-type {
    margin-right: 0;
  }

  .icon_circle+.icon_circle {
    margin-left: 3px;
  }

  .post_mark {
    position: relative;
    overflow: hidden;
  }

  .room-box-content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .post_mark_circle_default {
    width: 41px;
    height: 41px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid hsla(0, 0%, 100%, 0.3);
    margin-top: -16px;
    position: relative;
    float: right;
    margin-right: 24px;
  }

  .post_mark_font_default {
    color: hsla(0, 0%, 100%, 0.5);
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .select_cell {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    background: hsla(0, 0%, 40%, 0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .select_gou_icon,
  .lock-icon-box {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #f24e4c;
    font-size: 33px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
    left: calc((100% - 30px) / 2);
    top: calc((100% - 38px) / 2);
  }

  .ant-layout-sider .row_dl.real_time:first-of-type {
    padding: 15px 0 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .ant-layout-sider .row_dl.real_time {
    padding: 10px 0 5px;
  }

  .row_dl.real_time dd {
    width: 200px;
    margin: 0 auto;
  }

  .ant-input-affix-wrapper {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #002140;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: "tnum", "tnum";
    font-feature-settings: "tnum", "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: start;
  }

  .row_dl.real_time dt {
    width: 195px;
    margin: 0 auto 10px;
    line-height: 28px;
    font-size: 20px;
    color: rgb(0, 186, 173);
  }

  .bold {
    font-weight: 700;
  }

  .row_dl.real_time dd .all>.select_tag:nth-of-type(odd),
  .row_dl.real_time dd .filter>.select_tag:nth-of-type(odd) {
    margin-left: 0;
  }

  .row_dl.real_time .select_tag {
    float: left;
    width: 95px;
    padding: 0 1px 0 5px;
    margin: 0 1px 5px;
  }

  .select_tag {
    position: relative;
    display: inline-block;
    line-height: 24px;
    height: 24px;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
  }

  .select_tag .color_rect {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  .select_tag span {
    display: inline-block;
  }

  .select_tag span+span {}

  .row_dl.real_time dd .all>.select_tag:nth-of-type(odd),
  .row_dl.real_time dd .filter>.select_tag:nth-of-type(odd) {
    margin-left: 0;
  }

  .row_dl.real_time .select_tag.selected {
    overflow: hidden;
  }

  .row_dl.real_time .select_tag {
    float: left;
    width: 95px;
    padding: 0 1px 0 5px;
    margin: 0 1px 5px;
  }

  .select_tag.selected,
  .select_tag.selected:hover {
    color: #000;
    background: #fff !important;
    border: 1px solid #f24e4c;
  }

  .room-type-box{
    position: relative;
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  .room-type-box .arrow-content {
    position: fixed;
    z-index: 999;
    top: 340px;
    transition: right 0.4s ease-in-out;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #d8dce5;
    border: 1px solid #d8dce5;
    border-radius: 50%;

    .ic-arrow {
      color: #666;
      font-size: 14px;
    }

    &:hover {
      .ic-arrow {
        color: var(--el-color-primary) !important;
      }

      cursor: pointer;
    }

    .left-icon {
      // transform: rotate(180deg);
    }
  }

  .room-type-box .arrow-content:hover{
    background-color: #666;
    color:white;
  }

  .left-icon-content {
    right: 0px;
  }

  .right-icon-content {
    right: 5px;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color:  rgb(0, 186, 173);
    background-color: rgb(0, 186, 173);
  }

  .el-checkbox__inner {
    border-color: rgb(0, 186, 173); 
  }

  .FloorBreak {
    clear: both;
  }

  .vc {
    cursor: pointer;
  }

  .el-button--xsmini,
  .el-button--xsmini.is-round {
    padding: 3px 10px;
    font-size: 12px;
  }

  .contextmenu_div {
    display: table;
    color: rgba(0, 0, 0, 0.65);
    z-index: 20;
    font-size: 12px;
    box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }

  .left_div {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: table-cell;
    background: #fff;
  }

  .left_ul {
    width: 115px;
    padding-left: 0;
    margin-top: 0px;
  }

  .left_common_li {
    cursor: pointer;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .left_common_div {
    padding: 5px 10px;
  }

  .left_ul>li:last-of-type,
  .right_ul>li:last-of-type {
    border-bottom: none;
  }

  .fangtai ol,
  ul {
    list-style: none;
  }

  .fangtai .ant-layout,
  .ant-layout * {
    box-sizing: border-box;
  }

  .left_common_div:hover {
    background: #17b3a3;
    color: white;
  }

  .fangtai dl,
  ul {
    margin-bottom: 36px;
  }

  .right_div {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: table-cell;
    background: #f0f2f5;
    vertical-align: top;
  }

  .right_ul {
    width: 220px;
    padding-left: 0px;
    margin-top: 0px;
  }

  .left_ul>li:last-of-type,
  .right_ul>li:last-of-type {
    border-bottom: none;
  }

  .right_common_li {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  }

  .flexBox.oneColumn {
    flex-direction: column;
  }

  .flexBox,
  .flexBox>div {
    display: flex;
    align-items: center;
  }

  .flexBox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .flexBox.oneColumn.money {
    /deep/ .el-row {
      margin-bottom: 0;
    }
  }

  .flexBox.oneColumn>div {
    width: 100%;
  }

  .flexBox.auto>div,
  .flexBox.fourColumn>div,
  .flexBox.oneColumn>div,
  .flexBox.threeColumn>div,
  .flexBox.twoColumn>div {
    margin-right: 0;
  }

  .flexBox>div {
    padding: 3px 0;
    margin-right: 10px;
  }

  .flexBox,
  .flexBox>div {
    display: flex;
    align-items: center;
  }

  .flexBox.oneColumn>div {
    width: 100%;
  }

  .right_ul .flexBox.oneColumn>div>label {
    color: rgba(0, 0, 0, 0.65);
    margin-right: 0;
  }

  .flexBox>div>label.fourChar {
    width: 60px;
    margin-right: 5px;
  }

  .flexBox>div>label {
    color: rgba(0, 0, 0, 0.85);
    min-width: 45px;
  }

  .icon_circle i {
    font-style: inherit !important;
  }

  .left_group>.icon_circle:last-of-type {
    margin-right: 0;
  }

  .red_bg1 {
    background: #f24e4c !important;
  }

  .icon_circle+.icon_circle {
    margin-left: 3px;
  }

  .icon_circle_status {
    background: #fed80a;
    color: #666;
    margin-left: 3px;
    padding: 0 2px;
    width: auto;
  }

  .post_mark {
    position: relative;
    overflow: hidden;
  }

  .room-box-content,
  .post_mark {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .select_gou_icon,
  .lock-icon-box {
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #f24e4c;
    font-size: 18px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
  }

  .lock-icon-box {
    color:#fff;
    font-size: 36px;
    background-color: transparent;
    left: calc((100% - 30px) / 2);
    top: calc((100% - 38px) / 2);
  }

  /* switch按钮样式 */
  .switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
  }

  /*打开时文字位置设置*/
  .switch .el-switch__label--right {
    z-index: 1;
  }

  /* 调整打开时文字的显示位子 */
  .switch .el-switch__label--right span {
    margin-right: 9px;
  }

  /*关闭时文字位置设置*/
  .switch .el-switch__label--left {
    z-index: 1;
  }

  /* 调整关闭时文字的显示位子 */
  .switch .el-switch__label--left span {
    margin-left: 9px;
  }

  /*显示文字*/
  .switch .el-switch__label.is-active {
    display: block;
  }

  /* 调整按钮的宽度 */
  .switch.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 58px !important;
    padding: 0 6px;
    padding-left: 10px;
    margin: 0;
  }

  .my-scroll-bar {
    height: 850px;
  }

  .gm-scrollbar.-vertical {
    background-color: #f0f0f0;
  }

  .thumb {
    height: 200px !important;
  }

  /* horizontal scrollbar track */
  /* scrollbar thumb */
  .gm-scrollbar .thumb {
    background-color: #606266;
  }

  .gm-scrollbar .thumb:hover {
    background-color: #606266;
  }

  .gm-scrollbar.-horizontal .thumb {
    width: 0px !important;
  }

  .el-card__body {
    padding: 0px !important;
  }
  .el-card__body .main {
    padding: 0px !important;
  }

  @font-face {
    font-family: "iconfont";
    src: url("//at.alicdn.com/t/font_1933190_itepr4nee6a.eot?t=1594276950828");
    /* IE9 */
    src: url("//at.alicdn.com/t/font_1933190_itepr4nee6a.eot?t=1594276950828#iefix") format("embedded-opentype"),
      /* IE6-IE8 */
      url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAoUAAsAAAAAEVgAAAnGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEAgqUTJAxATYCJAMkCxQABCAFhG0HgQwbYQ6jonLTJ/sLbBv2tDtpt0vtGnfXAR+4bgYgyTegKqjCZwGMIQAA2IDgNyABBShk+YZ7h6GUfrX2+Xp6dvkIwB0HmGTqq2gCKB/J4A55NoR6psdN/wVGJUItEGRKTY1SlZnUDKYsbB6p2G3AUpiJMPpNZFOXLvLt9VjgEQjnV2OZLrFianlbAXmgP/VlKoSmWNI9gHrR2m9BYB+cazjwxM2qwaYXy/gHK7Rvjvlfc1VEq23eFgsl3u32dv+f8HYb9u8wm4iSIEniUSIhiVu2SIZGg1yJBci55CT8LVb2MDNZzh7UbJqJpS4/djIQwJXOD9TuHl+zTlJMEXyORgHrfDOQKeXEbjGZHVNQQMaOD4iPAI7R19Mf1VEnIBgJ4oPMW+8Itv7i91xW6+3ok+8gTX0IgLkYwIBSANJkn6zuMKDJr+RznVPrMEQefisflHxlKh+Vre4HW8FcrVH8lYzmJJKzAGCMDgmWhSTW/3g5YtpHdshig+KTHsaMa6AEApVJpDPF4CDATAcHC8x9KMGEYCIHScxcEKsuAM5lh2gAxQB3jMkCMVtP4ZJHYMa+fBDHOdTPzXRyQ7HkFIkdRk6ML/UdI4XCOH9BJu7oGCh0jUT1oFi8GdbY+JGq3g7mD8fLN8YuljF4PY5zAVtV87SaGZNNHJYctkT6027vhuJzj/S5JawYoUB7O1Ij+MMOZhix+ZaJHrZk9wc7NieFU7ifBNMR3l7c9StLmGPZ8TEjfj6KGhmlRZUkp54VIcBb6MwQ5J0za0wwTN4holA+DQleyuc0JhJXUhmcVKxGrGJCZ1EZrau2LKqgz0DMte9nQbWEGhUhukPENGRVJ72HtYOsvcyOGfW4pQtfD6POs1HjUkYMUxUhHJwpfxQEOUSUsxC0Q6xUukugpchiZSfwtiCXaJpdAtOz/TCSXL+qs7KgNrC04et2bhiZNU3Vo7lOdg9jabv6FiWq4oq8rloJctHWBgzOz9ZYDxlg5VKnx8oDDxplWjvmAQ5A3YUDsxpmw/S1SARyD97/fwCQtTC8M1cW4AntOHn1YWltepFuVE5e+u5QXubZE4ZoU0bcxWjMOlH8tfLxS7oLUg3rxW0aj6fVXBdJiTrpeesvIc6JK8HWo3ikaIx6kOR2+rGBq5ha40UZTBpNY8SpOR6Xy1vh8+erwNQOjCJI3PCNBIH0O9QG5w0LCov2Czo723keY0UXdLFemDYgulfa1FUPkoHhw0PQDqqnANTUdvjpy/MnX9SaozKGxEcOr3NAJXWaPCtm8DmcB+nDUDi48sLHzr3SIIbBOVj/+zJkr/CuCeLvMHs6GGalPDW3gcJ5tMiBJfirh9CDphbqzZ6YYdbAtS2lEWMJiNka6sZ5VkebzirxfdfxcbaTHE2nYhfTD+AjUSpKLWKh5eRFk5HUc+cJ7/4iGpYwXJg16A6ZpzBBfBuio9VUFWkUMwxJ4ZT+TsGFEGIwNAJ1bc1wSCeJko6u///NEtTVCQxsCwf5DHDcPPChwM9PAPgwcZDyg2tuodtq+yOThX9sTk7YKi3kqmd6vEVDO6vBvYjAkAAZ2LpvbKPHsoN5m0v9Xd5q/erM/X3NkbuDUsGBr/TXX6sU8uyYL6tjAkfwJTf7kMA3gPMicWbLG3xjubXTUCbvTCn5K3D3MCe54/WpQaGjzFE4OHXdUe6ETdVPYU6yj+6T2G9hza3k5FGpQqZNThmRjbDHXvtwkCqk21OS6x0nPqgFy9Nun+3rv9Xn/nv+c7r9PUi9OAH9+alEFyIhrjb/zi1ElY0nblDQbyczNWmb4IUFgyuy6rb0VeqwlPz9RXtFBiPI/Pj6zxOB1/dNa6+fvK4dHNiOnEJX46AWO42lnQyJvLRixcjKlSO6acXZAcy5d4vJIbQPdb63GAPyfj+sHALhP8zmuNxGxy+rymqLvhJUlpVVCr6cX6es/NKpKY/jtJIlkrHhpZBWCxm0Zd1SXhsPB1jKAqDaeenjx6klxaFxkL+fwtP4GWEZE+iTbt403/jOO0YAH4yF8sO3FkezvAfv+ay4Bw8A+Ek8L/xw674PFR9+6qXw/iRLkfWJt8ILvBjnbjseP+74Afo/+vIESDQT/O8qo/bYfLfulPnDXbol+aDv+F8XTel2i7zG23fKslu2B/9+Z/B2f10Lbygrsb47J+fAwAFvoKxeWhe28szWj3bxL1/mB9hVOMjnPwFqZkJ/uO/nd3lR9+KL2u+TndIRf1lEjnPjWrs8ZOmCSVCHqi4uWRpfASmc/fyWOPNAWhEhViyVWO1SKxtTUZ6zcGing4IXcbvvWWoa+H2hPvPxtMMkEZ8PUieRpe7KHc+fT74689kpgcSqWBprwU5n7f7Q7cV0VgUIP6UOaII2bYKaAhqbaU3Q2+WtmS6PL82OxlTm0MaLj108kwXg2H/Dz1tpR9oSdqO2XvSepPYjtqvtNuK7gWz+zgOxb/d09my3R5zSFpX5+P2zO4j6ZivzDl6kONFyDw62z2hIa8iwD7a7t2Gvm9rtnRAYhD2fP530SGwrfpQU+ZcEYafS9sC29nunL07kRofiHoteJMBDGcCLt8A0gvvCCYeOO7nM43nf9Vtc0WmK0h7V2fx+vWmfzQ2ufh46KMZOnTxOfVtVYd0nYyMVD3m0Mdo4eCsz3VrX2Nj/pUPMazo/eFtnmyJNoV/zbt7LzDdZbt8POPgD94Qqlz6RRRzbtyWI7+za9y67SyV0tp17lwrbOv0m9ev+k5yCtn2vsqM/YEImy6v06Lkt4pC4DQJ9UkdL1/Kd1utiedtiRdzP2+avWGM737mEdE9ZdMmVz5t/tI7xwDXq6Up493N0ztqBuP+29xc70lvaryJtvQZAuVO7kBxC9eRSfkraSTLQxtAJESS+i7X+Oc6JKNHoaIVnFAD3MAVQNXujvVcvG5dbo0izcU+RYEkTMVtuuswuFRk8tSKTrUnkKpG5nCfGBi0oddQmdgtEJNIxkRDuCWQu+wmUyH5XZIj3LTApjlpEriWRywE9+ZHpTg0ICQW/6+WmmZzs9tR9871ElUsIQquvdYshGnJ8PiAosu2hw1DHJrFLLaQOyeUGqviutgGWJfF6A1ks0ozGWi/OBrbZm84UayvWbaIAgXSRFbgmT6rLFYgj5066vz7/ElKyEggpKX3VWyiIzPy5YAGCcqTv0S5Xyr4Et7unLOgQSOInY0CqO5shESoPZsKt45ezUCGZsayEsbYoUEzWlpeeaZ+ttjWNzTdufFgnEsQkySCTLLLJIRdWFRYwKMTeXrDGHV9KKaD2dsoxU1d7ovoBUqHb14ER2XStNuAEBKCBdo1OBRPJKZ/B9b3nCRgAYgwA") format("woff2"),
      url("//at.alicdn.com/t/font_1933190_itepr4nee6a.woff?t=1594276950828") format("woff"),
      url("//at.alicdn.com/t/font_1933190_itepr4nee6a.ttf?t=1594276950828") format("truetype"),
      /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("//at.alicdn.com/t/font_1933190_itepr4nee6a.svg?t=1594276950828#iconfont") format("svg");
    /* iOS 4.1- */
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-Arrears:before {
    content: "\e604";
  }

  .icon-yajinjinggao:before {
    content: "\e62a";
  }

  .icon-sousuo:before {
    content: "\e74f";
  }

  .icon-stopwatch:before {
    content: "\e743";
  }

  .icon-paidui:before {
    content: "\e603";
  }

  .icon-miandarao:before {
    content: "\e6ba";
  }

  .icon-shengrisongquan:before {
    content: "\e649";
  }

  .icon-shengridangao:before {
    content: "\e620";
  }

  .fangtai .rooms-box {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .fangtai .rooms-box::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background-color: #606266;
  }

  .fangtai .scrollbar::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background-color: #606266;
  }

  ::-webkit-scrollbar-track {
    background-color: #f0f0f0;
  }

  /* 滚动条的滑轨背景颜色 */

  ::-webkit-scrollbar-thumb {
    background-color: #606266;
  }

  /* 滑块颜色 */

  ::-webkit-scrollbar-button {
    display: none;
  }

  .booking_circle_span,
  .orange_circle_span {
    display: inline-block;
    vertical-align: middle;
  }

  .booking_circle_span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #f24e4c;
    border: 1px solid #f24e4c;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
  }

  .fangtai .el-dialog {
    &__body {
      max-height: auto !important;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  .fangtai {
    // position: relative;
  }

  .selected-rooms.show {
    display: block;
  }

  .selected-rooms {
    display: none;
    position: absolute;
    right: 0px;
    top: 45px;
    z-index: 9999;
    border:1px solid rgb(0, 186, 173);
    background-color: rgb(255, 255, 255);
    transition: all 0.3s ease 0s;
    border-bottom: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
  }

  .selected-room-box {
    max-height: 400px;
    padding-top: 10px;
    color: rgb(0, 186, 173);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .selected-rooms-footer {
    zoom: 1;
    text-align: center;
    border-top: 1px solid rgb(221, 221, 221);
    margin: 0px -10px;
    padding: 10px 5px 5px;
  }

  .selected-room-box>div {
    width: 321px;
  }

  .selected-room-box .room-number-tag.in_block {
    margin-bottom: 10px;
  }

  .room-number-tag i {
    color: rgb(0, 186, 173);
    font-size: 12px;
  }

  .selected-rooms-footer {
    zoom: 1;
    text-align: center;
    border-top: 1px solid rgb(221, 221, 221);
    margin: 0px -10px;
    padding: 10px 5px 5px;
  }

  .in_block {
    display: inline-block;
  }

  .room-number-tag {
    line-height: 14px;
    font-size: 14px;
    padding: 4px 5px;
    background: rgb(255, 243, 242);
    border-width: 1px;
    color: rgb(0, 186, 173) !important;
    // border-style: solid;
    // border-color: rgb(247, 137, 135);
    border-radius: 3px;
    margin: 0px 5px 6px;
  }

  .rooms-box-loading {
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;

    .loading-warp {
      height: 100px;
      align-self: center;

      .loading-title {
        text-align: center;
        color: #1890ff;
      }
    }

    .loading-anim {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100px;
      padding: 0 25px;

      span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-bottom: 10px;
      }
    }

    .loading-anim-1 {
      position: relative;
      z-index: 1001;
      animation: anim-1 ease 2s infinite;
      background-color: #f86;
    }

    .loading-anim-2 {
      animation: anim-2 ease 2s .25s infinite;
      background-color: #fc6;
    }

    .loading-anim-3 {
      animation: anim-3 ease 2s .75s infinite;
      background-color: #6d7;
    }

    .loading-anim-4 {
      animation: anim-4 ease 2s .5s infinite;
      background-color: #4ae;
    }

  }

  @keyframes anim-1 {

    0%,
    100% {
      transform: translate(0, 0);
    }

    12.5% {
      transform: translate(30px, 0);
    }

    25% {
      transform: translate(30px, 30px);
    }

    37.5% {
      transform: translate(0, 30px);
    }

    50% {
      transform: translate(0, 0);
    }

    62.5% {
      transform: translate(30px, 0);
    }

    75% {
      transform: translate(30px, 30px);
    }

    87.5% {
      transform: translate(0, 30px);
    }
  }

  @keyframes anim-2 {

    0%,
    50%,
    100% {
      transform: translate(0, 0);
    }

    12.5% {
      transform: translate(0, 30px);
    }

    25% {
      transform: translate(-30px, 30px);
    }

    37.5% {
      transform: translate(-30px, 0);
    }
  }

  @keyframes anim-3 {

    0%,
    50%,
    100% {
      transform: translate(0, 0);
    }

    12.5% {
      transform: translate(0, -30px);
    }

    25% {
      transform: translate(30px, -30px);
    }

    37.5% {
      transform: translate(30px, 0);
    }
  }

  @keyframes anim-4 {

    0%,
    50%,
    100% {
      transform: translate(0, 0);
    }

    12.5% {
      transform: translate(-30px, 0);
    }

    25% {
      transform: translate(-30px, -30px);
    }

    37.5% {
      transform: translate(0, -30px);
    }
  }

  .el-popover {
    padding: 0;
    animation: elPopoverShow .15s ease-out 1;
    box-shadow : rgb(56, 56, 56) 5px 5px 5px 1px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 6px;
    .right_div {
      border: 12px solid #f0f2f5;
      border-radius: 5px;
    }
  }

  @keyframes elPopoverShow {
    0% {
      transform: scale(.1);
    }

    70% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  .el-footer {
    &.active {
      .el-tooltip {
        animation: moonStar .8s ease-in infinite;
      }
    }
    .color-block{
      display:inline-block;
      vertical-align: middle;
      width : 26px;
      height : 18px;
    }
  }

  /* 左侧房态说明悬浮按钮 */
  .float-drag-button {
    position: absolute;
    left: 0;
    top: 60%;
    z-index: 6666;
    padding: 13px;
    width: 42px;
    opacity: 1;
    background-color: #007bff;
    border-radius: 0px 8px 8px 0px;
    box-shadow: 0px 2px 15px 0px rgba(9,41,77,0.15);
    cursor: pointer;
    span {
      font-size: 16px;
      color: white;
      line-height: 24px;
      user-select: none;
    }
  }

  

  @keyframes moonStar {

    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }
  }

  .icon_circle_blue {
    background: lavenderblush;
    color: #666;
    margin-left: 3px;
    padding: 0 2px;
    width: auto;
  }

  /* 文字图标 */
  .icon-txt{
    display: inline-block;
    font-size: 14px; 
    line-height: 24px;
    width: 24px;
    height: 24px;
    font-style: normal;
    color: #ffffff; 
    background-color: rgb(255,141,26);
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
  }
  /* 美团 */
  .icon-txt-mei {
    color: #ffffff;
    background-color: rgb(255,141,26);
  }
  /* 携程 */
  .icon-txt-ctrip {
    color : rgb(42, 130, 228);
    background-color: #fff;
    border: 1px solid #ccc;
  }
  /* 飞猪 */
  .icon-txt-fli {
    background-color : rgb(255, 235, 59);
    color: black;
  }
  
  /* 去哪儿*/
  .icon-txt-qunr {
    background-color : rgb(42, 130, 228);
    color: #fff;
  }
  /* 同程艺龙 */
  .icon-txt-elong {
    background-color : rgb(0, 186, 173);
    color: #fff;
  }
  /* 抖音 */
  .icon-txt-dou {
    background-color : #000;
    color: #fff;
  }
  /* 微信订房 */
  .icon-txt-vx {
    background-color : rgb(67, 207, 124);
    color: #fff;
  }
  /* 会员 */
  .icon-txt-vip {
    font-size: 10px;
    background-color : transparent;
    color: rgb(255, 141, 26);
  }
  /* 维修 */
  .icon-txt-maint {
    color : rgb(42, 130, 228);
    background-color: #fff;
    border: 1px solid #ccc;
  }
  /* 钟点房 */
  .icon-txt-hour{
    color : rgb(255, 235, 59);
  }
  /* 欠费 */
  .icon-txt-arrears {
    color : rgb(255, 87, 51);
    background-color: #fff;
    border: 1px solid #ccc;
  }
  /* 会员 */
  .icon-txt-dirty {
    background-color : rgb(101, 101, 101);
    color: #fff;
  }
  /* 预订 */
  .icon-txt-ding {
    color : rgb(0, 186, 173);
    background-color: #fff;
    border: 1px solid #ccc;
  }
  /* 联房n组 */
  .icon-txt-twin {
    color : rgb(42, 130, 228);
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 10px;
  }
  /* 今日预离 */
  .icon-txt-li {
    color : rgb(42, 130, 228);
    background-color: #fff;
    border: 1px solid #ccc;
  }
  

  /* 滑轨两头的监听按钮颜色 */
  @media (max-width: 1400px) {
    .rooms-el-header .rooms-el-header-content {
      div:nth-child(2) {
        float: left;
      }
    }
  }

  .scroll-pane {
    position: relative;
    width: 80%;

    .arrow-content {
      position: absolute;
      top: 4px;
      box-sizing: border-box;
      width: 26px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      background: #fff;
      border: 1px solid #d8dce5;
      border-radius: 4px;

      .ic-arrow {
        color: #666;
        font-size: 14px;
      }

      &:hover {
        .ic-arrow {
          color: var(--el-color-primary) !important;
        }

        cursor: pointer;
      }

      .left-icon {
        // transform: rotate(180deg);
      }
    }

    .left-icon-content {
      left: 5px;
    }

    .right-icon-content {
      right: 5px;
    }

    .scroll-container {
      position: relative;
      width: 100%;
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .scoll-slot {
        display: inline-block;
        white-space: nowrap;
      }
    }
  }
</style>
